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:

　　　　　　一、可空參數； 

　　　　　　二、能夠在模版中使用 let-key 語句進行綁定； 這個key,是咱們在HTML模版綁定顯示的key,即 {{key}} 。

　　　　　　三、使用 $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'};