Angular Component 开发时属性和运行时属性的对照
生活随笔
收集整理的這篇文章主要介紹了
Angular Component 开发时属性和运行时属性的对照
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
看個(gè)具體的例子:
@Component({selector: 'cx-carousel',template: `<ng-container *ngFor="let item$ of items"><ng-container*ngTemplateOutlet="template; context: { item: item$ | async }"></ng-container></ng-container>`, }) class MockCarouselComponent {@Input() title: string;@Input() template: TemplateRef<any>;@Input() items: any[]; }圖中藍(lán)色高亮的items和template屬性需要消費(fèi)端傳入:
下圖是在另一個(gè)Component UI里消費(fèi)MockCarouselComponent:
中括號(hào)里的items, title和template就是MockCarouselComponent使用@Input()指定的三個(gè)屬性,等號(hào)右邊的items,title, title,title和carouseItem都是另一個(gè)Component本身的屬性。
最后渲染出的html網(wǎng)頁里,CarouselComponent這三個(gè)屬性顯示如下:
要獲取更多Jerry的原創(chuàng)文章,請(qǐng)關(guān)注公眾號(hào)"汪子熙":
總結(jié)
以上是生活随笔為你收集整理的Angular Component 开发时属性和运行时属性的对照的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 阴阳师茨木童子新皮肤鬼骸之握上线时间是什
- 下一篇: Angular async pipe在C