合同介紹......

ngTemplateOutlet是定義模板引用和模板的上下文(即ng-template)對象的字符串，這樣如果有多個模板引用可以用這種方式 ngTemplateOutletContext是附加到的上下文(即ng-template)對象EmbeddedViewRef。這應該是一個對象，該對象的鍵可用于本地模板let 聲明的綁定。$implicit在上下文(即ng-template)對象中使用鍵會將其值設置為默認值。 ngTemplateOutlet也可用于外部傳進來的模板

child.component.html

child.component.ts

@Input() tplRef: TemplateRef

ng-template用法

用法一

結(jié)合*ngIf使用，這樣可以不用加兩次不同判斷條件，可以在html里直接使用if else語句

{{text}}

    暫無數(shù)據(jù)

用法二

頁面里使用antd的modalService創(chuàng)建對話框時，可以模板寫在html里面，通過引用加載過來放到modal的nzContent里（說的有點亂了，看代碼吧）

xxxxxxx

export class AppComponent implements OnInit {
    // 引入模板
     @ViewChild('content') contentTpl: TemplateRef;
    ngOnInit() {
        this.modalService.create({
            nzTitle: '標題',
            nzContent: this.contentTpl
        })
    }
}

用法三

以模板的形式，作為一個輸入變量傳給組件，這樣我們就可以在用這個組件時寫成自己想要的內(nèi)容 比如我們寫個共用的暫無數(shù)據(jù)的組件，一般只用傳text文字就可以有些特殊的時候我們可能需要一些新增按鈕。

empty.component.html

    
    

        
            
        
        {{text || ''}}
    

empty.component.ts

export class EmptyComponent {
    @Input() text: TemplateRef
  isTemplate(text: any) {
      return text instanceof TemplateRef;
  }
}

總結(jié)，都是一些最基礎的用法，現(xiàn)在所了解的就這些用法，如果有知道更多的歡迎大家補充。

感謝各位的閱讀，以上就是“Angular模板中ng-template和ng-container指令的用法”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對Angular模板中ng-template和ng-container指令的用法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！