Angular如何利用內(nèi)容投射向組件輸入ngForOf模板-創(chuàng)新互聯(lián)
這篇文章主要介紹了Angular如何利用內(nèi)容投射向組件輸入ngForOf模板，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
10年積累的成都網(wǎng)站制作、做網(wǎng)站經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有
沙雅免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
現(xiàn)在，我們寫一個組件puppiesListCmp，用于顯示小狗狗的列表：
//puppies-list.component.ts
@Component({
selector: 'puppies-list',
template: `
{{puppy.name}}
{{puppy.age}}
{{puppy.color}}
`
})
export class puppiesListCmp{
@Input() puppies: Puppy[];
}
interface Puppy {
name: string,
age: number,
color: string
}
然后這樣使用：
//app.component.ts
@Component({
selector: 'my-app',
template: `
`
})
export class App{
puppies = [
{
name: "sam",
age: 0.6,
color: "yellow"
},
{
name: "bingo",
age: 1.5,
color: "black"
}
]
}效果就行這樣：
但是，我希望我們的puppiesListCmp組件可以滿足不同的需求，比如在數(shù)據(jù)不變的情況下只顯示小狗狗的name和color，就像這樣：
這就是本文的重點了。我們需要實現(xiàn)用戶自定義模板！
現(xiàn)在我們不寫死組件的模板了，而是讓用戶從外部輸入!
首先，我們的組件模板：
{{puppy.name}}
{{puppy.age}}
{{puppy.color}}
等價于：
{{puppy.name}}
{{puppy.age}}
{{puppy.color}}
然后，用@ContentChild（關(guān)于@ContentChild可以查看這里，需FQ）獲取到外部（相對puppiesListCmp組件而言）自定義模板，并賦給ngForTemplate。也就是說，這部分：
{{puppy.name}}
{{puppy.age}}
{{puppy.color}}
不再像之前那樣寫死在組件里了，而是由使用者在父組件中自定義，然后利用Angular的內(nèi)容投射（Content Projection），投射到puppiesListCmp組件里面。就像這樣：
//puppies-list.component.ts
import { Component, Input, ContentChild, TemplateRef } from '@angular/core';
import { NgForOfContext } from '@angular/common';
@Component({
selector: 'puppies-list',
template: `
`
})
export class puppiesListCmp{
@Input() puppies: Puppy[];
@ContentChild(TemplateRef) tpl: TemplateRef>
}
interface Puppy {
name: string,
age: number,
color: string
}這樣我們的組件就算完成了。然后我們使用它：
//app.component.ts
@Component({
selector: 'my-app',
template: `
{{puppy.name}}
{{puppy.age}}
{{puppy.color}}
`
})效果還是一樣的：
如果我們只要顯示小狗狗的name和color，只要這樣寫就好了：
//app.component.ts
@Component({
selector: 'my-app',
template: `
{{puppy.name}}
{{puppy.color}}
`
})效果就像這樣：
這樣的組件很靈活，想要什么樣的效果都可以定制，這就實現(xiàn)了組件的復(fù)用。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Angular如何利用內(nèi)容投射向組件輸入ngForOf模板”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
新聞名稱：Angular如何利用內(nèi)容投射向組件輸入ngForOf模板-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：
http://weahome.cn/article/dgopoj.html
重慶分公司
重慶分公司
