NgTemplateOutlet：Inserts an embedded view from a prepared TemplateRef.

語(yǔ)法：

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

看個(gè)例子：

@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'}; }

運(yùn)行時(shí)，*ngTemplateOutlet="greet"處的代碼被<ng-template #greet>指定的模板所取代：

運(yùn)行時(shí)的html如下圖所示：

可以通過(guò)語(yǔ)法context: object從消費(fèi)者端傳遞數(shù)據(jù)給template：

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

要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Angular NgTemplateOutlet的一个例子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。