該指令用于基于已有的 TemplateRef 對象茵宪,插入對應(yīng)的內(nèi)嵌視圖。在應(yīng)用 NgTemplateOutlet 指令時匣缘,我們可以通過 [ngTemplateOutletContext] 屬性來設(shè)置 EmbeddedViewRef 的上下文對象猖闪。綁定的上下文應(yīng)該是一個對象鲜棠,此外可通過 let 語法來聲明綁定上下文對象屬性名。
友情提示:若 let 語法未綁定任何屬性名培慌,則上下文對象中 $implicit 屬性豁陆,對應(yīng)的值將作為默認(rèn)值。
NgTemplateOutlet 指令語法
<ng-container
*ngTemplateOutlet="templateRefExp; context: contextExp">
</ng-container>
NgTemplateOutlet 使用示例
app.component.ts
export class AppComponent {
myContext = {$implicit: 'World', localSk: 'Svet',k:"ksdklsdlksdlk"};
}
app.component.html
<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="k"><span>Ahoj {{person}}!</span></ng-template>