Angular如何利用內(nèi)容投射向組件輸入ngForOf模板
這篇文章主要介紹了Angular如何利用內(nèi)容投射向組件輸入ngForOf模板，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
北票網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,北票網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為北票超過千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個(gè)售后服務(wù)好的北票做網(wǎng)站的公司定做！
現(xiàn)在，我們寫一個(gè)組件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，就像這樣：
這就是本文的重點(diǎn)了。我們需要實(shí)現(xiàn)用戶自定義模板！
現(xiàn)在我們不寫死組件的模板了，而是讓用戶從外部輸入!
首先，我們的組件模板：
{{puppy.name}}
{{puppy.age}}
{{puppy.color}}
等價(jià)于：
{{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}}
`
})效果就像這樣：
這樣的組件很靈活，想要什么樣的效果都可以定制，這就實(shí)現(xiàn)了組件的復(fù)用。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Angular如何利用內(nèi)容投射向組件輸入ngForOf模板”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
當(dāng)前文章：Angular如何利用內(nèi)容投射向組件輸入ngForOf模板
網(wǎng)址分享：
http://weahome.cn/article/gjcoec.html
重慶分公司
重慶分公司
