欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular 向組件傳遞模板的兩種方法

 更新時間:2018年02月23日 08:13:51   作者:不如隱茶去  
這篇文章主要介紹了Angular 向組件傳遞模板的兩種方法,第一種方式<ng-content>第二種方式是NgTemplateOutlet 指令及各種使用方式介紹,需要的朋友可以參考下

最近在寫一個日期選擇器組件,為了滿足將來可能出現(xiàn)的各種需求,所以需要能夠高度的自定義組件的樣式。為了達到這個目的,需要能夠在日期選擇器組件外控制每個日期格子內要顯示的內容,比如,標上節(jié)假日之類的。這時候,組件的一部分模板就需要由調用方提供。

在 React 里面,這種需求挺簡單的,只要實現(xiàn)一個 date => Element 這樣的函數(shù)就好了,但是 Angular 模板是純粹的模板,需要使用一些專門的概念才能實現(xiàn)這個功能。

第一種方式 <ng-content>

<ng-content> 這個標簽到本文撰寫時為止,還沒有官方的文檔,甚至連占位符都沒有。但是這并不妨礙我們的使用,外國熱心網(wǎng)友已經(jīng)總結出了 <ng-content> 在現(xiàn)階段的特點與作用。

基本用法

<!-- Wrapper.Component.html -->
<div>
  hello
  <ng-content></ng-content>
</div>

假設我們有一個上述的組件,然后向下面這樣調用:

<wrapper>
  <span> World </span>
</wrapper>

那么最終的渲染結果將會是這樣的:

<div>
  hello
  <span> World </span>
</div>

看起來就是發(fā)生了很簡單的替換,但是如果在 Wrapper 中出現(xiàn)了多個 <ng-content> 會出現(xiàn)多個 <span> World </span> 嗎?答案是不會的。<ng-content> 的本質只是移動元素,并不會去自動的創(chuàng)建傳入的模板,所以就算用 ngFor 套住 <ng-content> 也不會出現(xiàn)很多個 <span> World </span>。如果傳入的是自定義的組件,這些組件也只會被實例化一次。

進階用法

當然,如果 <ng-content> 的功能僅僅只是這樣就顯得太雞肋了,在使用 <ng-content> 的時候可以指定一個選擇器,這個選擇器可以捕獲相符的直接子元素。例如:

<!-- Wrapper.Component.html -->
<div>
  hello
  <ng-content></ng-content>
  <hr/>
  <ng-content select="span"></ng-content>
</div>

然后像下面這樣使用:

<wrapper>
  <span> World </span>
  2333
</wrapper>

最終的渲染結果將會是這樣:

<div>
  hello
  2333
  <hr/>
  <span> World </span>
</div>

除了設置 ng-content 標簽的 select 屬性之外,還可以在子元素上使用 ngProjectAs 屬性,這個屬性可以讓這個元素被父元素中指定的 ng-content 所捕獲。舉個例子:

<wrapper>
  <div ngProjectAs="span"> World </div>
  2333
</wrapper>

這次被傳入的模板變成了一個 div,但是因為設置了 ngProjectAs,所以“World”會出現(xiàn)在分割線下方。

第二種方式 NgTemplateOutlet 指令

使用 ng-content 確實可以起到傳入模板的效果,但是卻有個很致命的問題,就是無法傳遞數(shù)據(jù)到傳入的模板中。為了將數(shù)據(jù)傳遞到傳入的模板中,就需要使用到 NgTemplateOutlet 指令。

基本使用

這個指令可以用來在模板的指定位置實例化一個 TemplateRef 對象,同時,在實例化的過程中還可以傳入一個數(shù)據(jù)對象。而 TemplateRef 可以通過 ng-template 標簽來創(chuàng)建,舉個例子:

@Component({
 selector: 'ng-template-outlet-example',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>

  <ng-template #name let-name="data"><span>Hello {{name}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
 myContext = {data: 'World'};
}

ng-container 是一個虛擬的元素,在這個元素上我們使用了一個 NgTemplateOutlet 指令,指定了要實例化下面的名為 name 的 ng-template。同時把 myContext 這個對象作為實例化的數(shù)據(jù)上下文傳入,所以最終就會顯示 “Hello World!”。值得注意的是在 ng-template 里面獲取傳輸?shù)臄?shù)據(jù)上下文的方式:let-variableName='key'。

進階使用

接下來就要實現(xiàn)本文開頭提到的需求了,在組件外部傳入模板。還是以上面的例子為例,因為模板需要由外界作為子內容傳入,所以需要我們手動來捕獲模板,這里需要就需要使用 ContentChild:

@Component({
 selector: 'wrapper',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>
`
})
class NgTemplateOutletExample {
 @ContentChild(TemplateRef) name: TemplateRef<any>;
 myContext = {data: 'World'};
}

就是這么簡單的改動就可以讓我們的組件從外界接受模板了,來試一試:

<wrapper>
  <ng-template let-value="data">
    <span>Hello {{value}}!</span>
  </ng-template>
</wrapper>

總結

以上就是 Angular 中向組件傳遞模板的兩種方法,其中,使用 <ng-content> 標簽可以更方便的控制傳入的模板在 DOM 中的位置,而 NgTemplateOutlet 可以向傳入的模板傳遞渲染數(shù)據(jù),兩者搭配使用可以起到很好的效果。

以上所述是小編給大家介紹的Angular 向組件傳遞模板的兩種方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關文章

  • AngularJS實用基礎知識_入門必備篇(推薦)

    AngularJS實用基礎知識_入門必備篇(推薦)

    下面小編就為大家?guī)硪黄狝ngularJS實用基礎知識_入門必備篇(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • 使用Angular內置模塊進行HTTP請求

    使用Angular內置模塊進行HTTP請求

    這篇文章主要介紹了使用Angular內置模塊進行HTTP請求方法步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-10-10
  • Angular實現(xiàn)的自定義模糊查詢、排序及三角箭頭標注功能示例

    Angular實現(xiàn)的自定義模糊查詢、排序及三角箭頭標注功能示例

    這篇文章主要介紹了Angular實現(xiàn)的自定義模糊查詢、排序及三角箭頭標注功能,涉及AngularJS針對頁面table元素的遍歷、查詢、判斷、排序等相關操作技巧,需要的朋友可以參考下
    2017-12-12
  • AngularJS基礎 ng-model-options 指令簡單示例

    AngularJS基礎 ng-model-options 指令簡單示例

    本文主要介紹AngularJS ng-model-options 指令,這里對ng-model-options指令的基本資料進行整理,有需要的小伙伴可以參考下
    2016-08-08
  • 實踐中學習AngularJS表單

    實踐中學習AngularJS表單

    表單是最常用的一種組建。在Angular.js中,其實并沒有單獨的為表單添加多少特殊功能。但是,利用Angular.js框架本身的特點,可以更友好的呈現(xiàn)表單。下面將介紹幾種常用的功能在Angular中是如何巧妙實現(xiàn)的
    2016-03-03
  • 用Angular實現(xiàn)一個掃雷的游戲示例

    用Angular實現(xiàn)一個掃雷的游戲示例

    這篇文章主要介紹了用Angular實現(xiàn)一個掃雷的游戲示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-05-05
  • 使用AngularJS 跨站請求如何解決jsonp請求問題

    使用AngularJS 跨站請求如何解決jsonp請求問題

    這篇文章主要介紹了使用AngularJS 跨站請求如何解決jsonp請求問題,下面通過本文給大家分享解決辦法,需要的朋友參考下
    2017-01-01
  • AngularJS基礎 ng-value 指令簡單示例

    AngularJS基礎 ng-value 指令簡單示例

    本文主要介紹AngularJS ng-value 指令,這里對ng-value 的基礎資料做了整理,并附實例代碼,有需要的小伙伴可以參考下
    2016-08-08
  • AngularJS使用$http配置對象方式與服務端交互方法

    AngularJS使用$http配置對象方式與服務端交互方法

    今天小編就為大家分享一篇AngularJS使用$http配置對象方式與服務端交互方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • AngularJS基于ngInfiniteScroll實現(xiàn)下拉滾動加載的方法

    AngularJS基于ngInfiniteScroll實現(xiàn)下拉滾動加載的方法

    這篇文章主要介紹了AngularJS基于ngInfiniteScroll實現(xiàn)下拉滾動加載的方法,結合實例形式分析AngularJS下拉滾動插件ngInfiniteScroll的下載、功能、屬性及相關使用方法,需要的朋友可以參考下
    2016-12-12

最新評論