浅谈浅谈angular4 ng-content 中隐藏的内容中隐藏的内容
本篇文章主要介绍了浅谈angular4 ng-content 中隐藏的内容，小编觉得挺不错的，现在分享给大家，也给大家
做个参考。一起跟随小编过来看看吧
如果你尝试在 Angular 中编写可重复使用的组件，则可能会接触到内容投射的概念。然后你发现了 <ng-content> ，并找到了一
些关于它的文章，进而实现了所需的功能。
接下来我们来通过一个简单的示例，一步步介绍 <ng-content> 所涉及的内容。
Simple example
在本文中我们使用一个示例，来演示不同的方式实现内容投影。由于许多问题与Angular 中的组件生命周期相关，因此我们的
主要组件将显示一个计数器，用于展示它已被实例化的次数：
import { Component } from '@angular/core';
let instances = 0;
@Component({
selector: 'counter',
template: '<h1>{{this.id}}</h1>'
})
class Counter {
id: number;
constructor() {
this.id = ++instances;
}
}
上面示例中我们定义了 Counter 组件，组件类中的 id 属性用于显示本组件被实例化的次数。接着我们继续定义一个 Wrapper
组件：
import { Component } from '@angular/core';
@Component({
selector: 'wrapper',
template: `
<div class="box">
<ng-content></ng-content>
</div>
`
})
class Wrapper {}
现在我们来验证一下效果：
<wrapper>
<counter></counter>
<counter></counter>
<counter></counter>
</wrapper>
Targeted projection
有时你希望将包装器的不同子项投影到模板的不同部分。为了处理这个问题， <ng-content> 支持一个 select 属性，可以让你在特
定的地方投射具体的内容。该属性支持 CSS 选择器（my-element，.my-class，[my-attribute]，...）来匹配你想要的内容。如
果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。长话短说：
import { Component } from '@angular/core';
@Component({
selector: 'wrapper',
template: `
<div class="box red">
<ng-content></ng-content>
</div>
<div class="box blue">
<ng-content select="counter"></ng-content>
</div>
`,
styles: [`
.red {background: red;}
.blue {background: blue;}
资源评论
