最近在寫一個日期選擇器組件,為了滿足將來可能出現(xiàn)的各種需求,所以需要能夠高度的自定義組件的樣式。為了達到這個目的,需要能夠在日期選擇器組件外控制每個日期格子內(nèi)要顯示的內(nèi)容,比如,標上節(jié)假日之類的。這時候,組件的一部分模板就需要由調(diào)用方提供。
成都創(chuàng)新互聯(lián)公司堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:做網(wǎng)站、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的密山網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
在 React 里面,這種需求挺簡單的,只要實現(xiàn)一個 date => Element
這樣的函數(shù)就好了,但是 Angular 模板是純粹的模板,需要使用一些專門的概念才能實現(xiàn)這個功能。
第一種方式 <ng-content>
<ng-content> 這個標簽到本文撰寫時為止,還沒有官方的文檔,甚至連占位符都沒有。但是這并不妨礙我們的使用,外國熱心網(wǎng)友已經(jīng)總結(jié)出了 <ng-content> 在現(xiàn)階段的特點與作用。
基本用法
<!-- Wrapper.Component.html --> <div> hello <ng-content></ng-content> </div>
假設(shè)我們有一個上述的組件,然后向下面這樣調(diào)用:
<wrapper> <span> World </span> </wrapper>
那么最終的渲染結(jié)果將會是這樣的:
<div> hello <span> World </span> </div>
看起來就是發(fā)生了很簡單的替換,但是如果在 Wrapper 中出現(xiàn)了多個 <ng-content>
會出現(xiàn)多個 <span> World </span> 嗎?答案是不會的。<ng-content>
的本質(zhì)只是移動元素,并不會去自動的創(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>
最終的渲染結(jié)果將會是這樣:
<div> hello 2333 <hr/> <span> World </span> </div>
除了設(shè)置 ng-content
標簽的 select 屬性之外,還可以在子元素上使用 ngProjectAs 屬性,這個屬性可以讓這個元素被父元素中指定的 ng-content 所捕獲。舉個例子:
<wrapper> <div ngProjectAs="span"> World </div> 2333 </wrapper>
這次被傳入的模板變成了一個 div,但是因為設(shè)置了 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)本文開頭提到的需求了,在組件外部傳入模板。還是以上面的例子為例,因為模板需要由外界作為子內(nèi)容傳入,所以需要我們手動來捕獲模板,這里需要就需要使用 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>
總結(jié)
以上就是 Angular 中向組件傳遞模板的兩種方法,其中,使用 <ng-content>
標簽可以更方便的控制傳入的模板在 DOM 中的位置,而 NgTemplateOutlet 可以向傳入的模板傳遞渲染數(shù)據(jù),兩者搭配使用可以起到很好的效果。
以上所述是小編給大家介紹的Angular 向組件傳遞模板的兩種方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
分享文章:Angular向組件傳遞模板的兩種方法
轉(zhuǎn)載注明:http://muchs.cn/article46/gecheg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動網(wǎng)站建設(shè)、虛擬主機、網(wǎng)站設(shè)計公司、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)