看個具體的例子：

@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[]; }

圖中藍色高亮的items和template屬性需要消費端傳入：

下圖是在另一個Component UI里消費MockCarouselComponent：

中括號里的items, title和template就是MockCarouselComponent使用@Input()指定的三個屬性，等號右邊的items$,title$和carouseItem都是另一個Component本身的屬性。

最后渲染出的html網頁里，CarouselComponent這三個屬性顯示如下：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular Component 开发时属性和运行时属性的对照的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。