插槽
单插槽内容(匿名插槽)
import { Component } from '@angular/core';
@Component({
selector: 'app-zippy-basic',
template: `
<h2>Single-slot content projection</h2>
<ng-content></ng-content>
`
})
export class ZippyBasicComponent {}
<app-zippy-basic>
<p>Is content projection cool?</p>
</app-zippy-basic>
- 使用
<ng-content></ng-content>来填充插槽
多插槽内容（具名插槽）
<h1>子组件</h1>
<ng-content></ng-content>
<ng-content select="[solt1]"></ng-content>
<ng-content select="[solt3]"></ng-content>
<ng-content select="[solt2]"></ng-content>
<div>结尾</div>
<app-demo1>
这里是插槽里面的内容
<div solt1>这里是具名1</div>
<div solt2>这里是具名2</div>
<div solt3>这里是具名3</div>
</app-demo1>
有选择的内容投影
....
动态组件
...
依赖注入
...
