Angular ngTemplateOutlet


  雖然我們可以通過使用 ViewContainerRef 將 ElementRef創建的視圖插入指定的位置,但是仍然希望有某中快捷的方式幫我們實現。

  ngTemplateOutlet與ngComponentOutlet 就是幫我們干這事的。

ngTemplateOutlet

  插入 ng-template 創建的內嵌視圖。

   最簡單的例子如下:

<div *ngTemplateOutlet="tpl1"></div>
<ng-template #tpl1>
  <span>I am span in template {{title}}</span>
</ng-template>

       

    按照官方文檔,其語法知識如下: *ngTemplateOutlet = "templateRefExp; content: contentExp "

    templateRefExp:  ng-template 元素的#ID

    contextExp:

      1、可空參數; 

      2、可以在模版中使用 let-key 語句進行綁定; 這個key,是我們在HTML模版綁定顯示的key,即 {{key}} 。

      3、使用 $implicit 這個key會把對應的值設置為默認值;

         因為我們會為content指定一個對象,每個對象可能有一個或多個值;

         如果這個對象,是一個值,則不需顯示指定名稱,如 student :  { name: 'jack' } ,可以用 student: { $implicit: 'jack' };

        在 ng-template 中也不必使用 let-showName = "name", 只需要 let-showName 即可。 

          如下例子:


    HTML文件:
      <
ng-container *ngTemplateOutlet="tplStu; context: student"></ng-container>       <ng-template #tplStu let-name let-ageHTML="age">hello {{name}},your age is {{ageHTML}}</ng-template>     .ts文件 student = { $implicit: 'jack' , age: '19'};

      

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM