先自定義一個組件
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 { } ? ?

轉載于:https://www.cnblogs.com/mttcug/p/8004447.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的angular5 ng-content使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。