app HTML
<div class="wrapper">
<h2>我是父组件</h2>
<div>这个div定义在父组件中</div>
<app-child>
<div class="header">这个div是父组件投影到子组件的1, {{title}}</div>
<div class="footer">这个div是父组件投影到子组件的2</div>
</app-child>
</div>
<div [innerHTML] = "divContent">
</div>
app TS
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'demo';
divContent = '<div>天下打工</div>';
}
child HTML
<div class="wrapper">
<h2>我是子组件</h2>
<div>这个div定义在子组件中</div>
<div>内容投影使用 ng-content 跟 select</div>
<ng-content select=".footer"></ng-content>
<ng-content select=".header"></ng-content>
</div>