Angular元件——投影

starof發表於2018-04-09
Angular元件

執行時動態改變元件模版的內容。沒路由那麼複雜，只是一段html，沒有業務邏輯。

ngContent指令將父元件模版上的任意片段投影到子元件上。

一、簡單例子

1、子元件中使用<ng-content>指令來標記投影點

<div class="wrapper">
  <h2>我是子元件</h2>
  <div>這個div定義在子元件中</div>
  <ng-content></ng-content> 
</div>

2、父元件中把要投影到子元件的投影點的html片段寫到子元件的標籤中

<div class="wrapper">
  <h2>我是父元件</h2>
  <div>這個div定義在父元件中</div>
  <app-child2>
    <div>這個div是父元件投影到子元件中</div>
  </app-child2>
</div>

效果：

子元件加樣式：

.wrapper{
    background: lightgreen;
}

父元件加樣式：

.wrapper{
    background: cyan;
}

2、多個<ng-content>投影點

子元件：

<div class="wrapper">
  <h2>我是子元件</h2>
  <ng-content selecter=".header"></ng-content>
  <div>這個div定義在子元件中</div>
  <ng-content selecter=".footer"></ng-content> 
</div>

父元件：

<div class="wrapper">
  <h2>我是父元件</h2>
  <div>這個div定義在父元件中</div>
  <app-child2>
    <div class="header">這是頁頭，這個div是父元件投影到子元件中,title是{{title}}</div>
    <div class="footer">這是頁尾，這個div是父元件投影到子元件中</div>
  </app-child2>
</div>

頁頭和頁尾被投影到子元件中，同時title也被投影過去。

父元件模版中投影內容中插值表示式只能繫結父元件中的屬性，雖然內容會被投影到子元件中去。

3、Angular屬性繫結的方式插入html 

 在父元件模版中加一行：

<div [innerHTML]="divContent"></div>

父元件中加一個divContent屬性，內容就是一段html片段。

divContent="<div>屬性繫結綁innerHTML</div>";

效果

4、對比ngContent指令和屬性繫結innerHTML方式

[innerHTML]是瀏覽器特定的API。

ngContent指令平臺無關。可繫結多個投影點。

優先考慮ngContent指令。

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/8743223.html  有問題歡迎與我討論，共同進步。

相關文章