溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
該指令用于基于已有的 TemplateRef 對象，插入對應的內嵌視圖。在應用 NgTemplateOutlet 指令時，我們可以通過 [ngTemplateOutletContext] 屬性來設置 EmbeddedViewRef 的上下文對象。綁定的上下文應該是一個對象，此外可通過 let 語法來聲明綁定上下文對象屬性名。
友情提示：若 let 語法未綁定任何屬性名，則上下文對象中 $implicit 屬性，對應的值將作為默認值。
NgTemplateOutlet 指令語法
NgTemplateOutlet 使用示例
@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>
`
})
class NgTemplateOutletExample {
myContext = {$implicit: 'World', localSk: 'Svet'};
}
基礎知識
TemplateRef
TemplateRef 實例用于表示模板對象。
ViewContainerRef
ViewContainerRef 實例提供了 createEmbeddedView() 方法，該方法接收 TemplateRef 對象作為參數，并將模板中的內容作為容器 (comment 元素) 的兄弟元素，插入到頁面中。
<ng-template>
<ng-template> 用于定義模板，使用 * 語法糖的結構指令，最終都會轉換為 <ng-template> 模板指令，模板內的內容如果不進行處理，是不會在頁面中顯示。
<ng-container>
<ng-container> 是一個邏輯容器，可用于對節點進行分組，但不作為 DOM 樹中的節點，它將被渲染為 HTML中的 comment 元素，它可用于避免添加額外的元素來使用結構指令。
若想進一步了解 <ng-template> 與 <ng-container> 的區別，請參考Angular 4.x 動態創建組件 文章中我有話說版塊。
NgTemplateOutlet 源碼分析
NgTemplateOutlet 指令定義
@Directive({
selector: '[ngTemplateOutlet]'
})
NgTemplateOutlet 類私有屬性及構造函數
export class NgTemplateOutlet implements OnChanges {
// 表示創建的內嵌視圖
private _viewRef: EmbeddedViewRef<any>;
// 注入ViewContainerRef實例
constructor(private _viewContainerRef: ViewContainerRef) {}
}
NgTemplateOutlet 類輸入屬性
@Input() public ngTemplateOutletContext: Object; // 用于設定EmbeddedViewRef上下文 @Input() public ngTemplateOutlet: TemplateRef<any>; // 用于設定TemplateRef對象
NgTemplateOutlet 指令聲明周期
export class NgTemplateOutlet implements OnChanges {
ngOnChanges(changes: SimpleChanges) {
// 若this._viewRef已存在，則先從視圖容器中對應的位置移除該視圖。
if (this._viewRef) {
this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef));
}
// 若this.ngTemplateOutlet輸入屬性有綁定TemplateRef對象，則基于設定的上下文對象創建內嵌視圖
if (this.ngTemplateOutlet) {
this._viewRef = this._viewContainerRef.createEmbeddedView(
this.ngTemplateOutlet, this.ngTemplateOutletContext);
}
}
}
ngTemplateOutlet 指令的源碼相對比較簡單，如果讀者有興趣了解 createEmbeddedView() 方法的內部實現，可以參考 Angular 4.x NgIf 文章中的相關內容。
另外需要注意的是使用 let 語法創建模板局部變量，若未設置綁定的值，則默認是上下文對象中 $implicit 屬性對應的值。為什么屬性名是 $implicit 呢？因為 Angular 不知道用戶會如何命名，所以定義了一個默認的屬性名。 即 let-name="$implicit" 與 let-name 是等價的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
