大綱
1、認(rèn)識(shí)內(nèi)容投射
2啄枕、一個(gè)簡(jiǎn)單組件
3婚陪、簡(jiǎn)單投射
4、針對(duì)性投射
5频祝、ngProjectAs
6泌参、代碼資源
認(rèn)識(shí)內(nèi)容投射
在angular中脆淹，組件屬于特殊的指令，它的特殊之處在于它有自己的模板（html）和樣式（css）沽一。因此使用組件可以使我們的代碼具有強(qiáng)解耦盖溺、可復(fù)用、易擴(kuò)展等特性铣缠。
一個(gè)簡(jiǎn)單組件
/*
demo.component.ts
*/
import { Component, OnInit } from ‘@angular/core‘;
@Component({
selector: 'demo-component',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
}
<!--
demo.component.html：
-->
<div class="demo">
<h2>
demo-component - 我是一個(gè)簡(jiǎn)單的組件
</h2>
</div>
/*
demo.component.scss：
*/
.demo {
padding: 10px;
border: 2px solid red;
h2 {
margin: 0;
color: #262626;
}
}
<!--
此時(shí)我們引用該組件烘嘱，就會(huì)呈現(xiàn)該組件解析之后的內(nèi)容：
-->
<demo-component></demo-component>
需求
假設(shè)現(xiàn)在有這樣的需求，這個(gè)組件能夠接受外部投射進(jìn)來(lái)的內(nèi)容攘残，也就是說(shuō)組件最終呈現(xiàn)的內(nèi)容不僅僅是本身定義的那些拙友，那該怎么做呢？這時(shí)就要請(qǐng)出本文的主角 ng-content歼郭。
簡(jiǎn)單投射
<!--
demo.component.html：
-->
<div class="demo">
<h2>
demo-component - 可嵌入外部?jī)?nèi)容的組件
</h2>
<div class="content">
<ng-content></ng-content>
</div>
</div>
/*
demo.component.scss：
*/
.demo {
padding: 10px;
border: 2px solid red;
h2 {
margin: 0;
color: #262626;
}
.content {
padding: 10px;
margin-top: 10px;
line-height: 20px;
color: #FFFFFF;
background-color: #de7d28;
}
}
<!--
為了效果展示特意將 所在的容器背景色定義為橙色。
這時(shí)我們?cè)谝迷摻M件時(shí)可以從外部投射內(nèi)容辐棒，外部?jī)?nèi)容將在橙色區(qū)域顯示：
-->
<demo-component>
我是外部嵌入的內(nèi)容
</demo-component>
針對(duì)性投射
如果同時(shí)存在幾個(gè)外部?jī)?nèi)容病曾，那外部?jī)?nèi)容將如何進(jìn)行投射呢？
如果同時(shí)存在簡(jiǎn)單的外部?jī)?nèi)容漾根，那么外部?jī)?nèi)容將投射在組件模板最后的那個(gè)ng-content中泰涂。
<!--
demo.component.html：
-->
<div class="demo">
<h2>
demo-component - 可嵌入外部?jī)?nèi)容的組件
</h2>
<div class="content">
<ng-content></ng-content>
</div>
<div class="content blue">
<ng-content select="header"></ng-content>
</div>
<div class="content red">
<ng-content select=".demo2"></ng-content>
</div>
<div class="content green">
<ng-content select="[name=demo3]"></ng-content>
</div>
</div>
/*
demo.component.scss：
*/
.demo {
padding: 10px;
border: 2px solid red;
h2 {
margin: 0;
color: #262626;
}
.content {
padding: 10px;
margin-top: 10px;
line-height: 20px;
color: #FFFFFF;
background-color: #de7d28;
&.blue {
background-color: blue;
}
&.red {
background-color: red;
}
&.green {
background-color: green;
}
}
}
<!--
從上面代碼可以看到，藍(lán)色區(qū)域?qū)⒔邮?標(biāo)簽 header 那部分內(nèi)容辐怕，
紅色區(qū)域?qū)⒔邮?class為"demo2"的div 的那部分內(nèi)容逼蒙，
綠色區(qū)域?qū)⒔邮?屬性name為"demo3"的div 的那部分內(nèi)容，
橙色區(qū)域?qū)⒔邮掌溆嗟耐獠績(jī)?nèi)容（開(kāi)始寄疏，我是外部嵌入的內(nèi)容是牢，結(jié)束）。
引用該組件：此時(shí)陕截，我們將看到外部?jī)?nèi)容投射到了指定的 中驳棱。
-->
<demo-component>
開(kāi)始，我是外部嵌入的內(nèi)容农曲，
<header>
我是外部嵌入的內(nèi)容社搅，我在header中
</header>
<div class="demo2">
我是外部嵌入的內(nèi)容，我所在div的class為"demo2"
</div>
<div name="demo3">
我是外部嵌入的內(nèi)容demo乳规，我所在div的屬性name為"demo3"
</div>
結(jié)束
</demo-component>
ngProjectAs
現(xiàn)在我們知道通過(guò) ng-content 的 select 屬性可以指定外部?jī)?nèi)容投射到指定的元素中形葬。
而要能正確的根據(jù) select 屬性投射內(nèi)容，有個(gè)限制就是 - 不管是 標(biāo)簽 header暮的、class為"demo2"的div還是 屬性name為"demo3"的div笙以，這幾個(gè)標(biāo)簽都是作為 組件標(biāo)簽 的直接子節(jié)點(diǎn)。
通過(guò)設(shè)置 ngProjectAs 屬性青扔，讓 標(biāo)簽header 所在的 div 指向了 select="header"源织，此時(shí) 標(biāo)簽 header 那部分內(nèi)容有投射到藍(lán)色區(qū)域了翩伪。
<demo-component>
開(kāi)始，我是外部嵌入的內(nèi)容谈息，
<div ngProjectAs="header">
<header>
我是外部嵌入的內(nèi)容缘屹，我在header中
</header>
</div>
<div class="demo2">
我是外部嵌入的內(nèi)容，我所在div的class為"demo2"
</div>
<div name="demo3">
我是外部嵌入的內(nèi)容demo侠仇，我所在div的屬性name為"demo3"
</div>
結(jié)束
</demo-component>
代碼資源
angular實(shí)例代碼中angular-ng-content中包含著使用ng-content進(jìn)行組件內(nèi)容投射轻姿，里面有本篇博客中所包含的所有實(shí)例，從一個(gè)簡(jiǎn)單組件到內(nèi)容投射都含有逻炊，如果有興趣的讀者可以從git上下載下來(lái)嘗試互亮。
