angular ng-content

<p>
  child works!
</p>
<ng-content></ng-content>

<app-child>
  父组件投影
</app-child>

 

<p>
  child works!
</p>
<ng-content select=".header"></ng-content>

<ng-content select=".footer"></ng-content>

<app-child>
  <div class="header">页头</div>
  <div class="footer">页脚</div>
</app-child>
<div [innerHTML]='div1'></div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  div1 = '<div>aaa</div>';
}