angular5 ng-content使用方法

先自定義一個組件
import { Component } from '@angular/core'; @Component({ selector: 'exe-greet', template: ` <div class="border"> <p>Greet Component</p>  <ng-content></ng-content> </div> `, styles: [` .border { border: 2px solid #eee; } `] }) export class GreetComponent { }


另一個父組件

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h4>Welcome to Angular World</h4> <exe-greet>  <p>Hello Semlinker</p> </exe-greet> `, }) export class AppComponent { }

exe-greet指令使用時是<exe-greet></exe-greet>中間沒有內容的，如果中間想要放不同內容，可使用ng-content占位符占位

由此可見ng-content是代指使用組件時內部的東西

除此之外ng-content　還有一個select屬性

import { Component } from '@angular/core'; @Component({ selector: 'exe-greet', template: `

<div style="border: 1px solid #666;margin: 4px;"> <div style="border: 1px solid red;margin: 5px;"> <ng-content select="header"></ng-content> </div> <div style="border: 1px solid green;margin: 5px;"> <ng-content select=".card_body"></ng-content> </div> <div style="border: 1px solid blue;margin: 5px;"> <ng-content select="footer"></ng-content> </div> </div>

`, styles: [` .border { border: 2px solid #eee; } `] }) export class GreetComponent{ }

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h4>Welcome to Angular World</h4>  <exe-greet> <header>Card Header</header> <div class="card_body">Card Body</div> <footer>Card Footer</footer> </exe-greet> `, }) export class AppComponent { }