NgTemplateOutlet：Inserts an embedded view from a prepared TemplateRef.

語法：

<ng-container *ngTemplateOutlet=“templateRefExp; context: contextExp”>

看個例子：

@Component({selector: 'ng-template-outlet-example',template: `<ng-container *ngTemplateOutlet="greet"></ng-container><hr><ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container><hr><ng-container *ngTemplateOutlet="svk; context: myContext"></ng-container><hr><ng-template #greet><span>Hello</span></ng-template><ng-template #eng let-name><span>Hello {{name}}!</span></ng-template><ng-template #svk let-person="localSk"><span>Ahoj {{person}}!</span></ng-template> ` }) export class NgTemplateOutletExample {myContext = {$implicit: 'World', localSk: 'Svet'}; }

運行時，*ngTemplateOutlet="greet"處的代碼被<ng-template #greet>指定的模板所取代：

運行時的html如下圖所示：

可以通過語法context: object從消費者端傳遞數據給template：

如果只傳一個字段給模板，傳遞的參數可以不指定具體名稱，直接用$implicit代替。如果需要傳遞多個字段，在模板里使用let- = "b"傳遞參數，其中a為模板里{{}}中使用的參數名，而b為傳遞給模板的參數中的字段名。a和b必須一一對應。

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Angular NgTemplateOutlet的一个例子的全部內容，希望文章能夠幫你解決所遇到的問題。

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