Angular Component 開發時屬性和運作時屬性的對照

看個具體的例子：

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

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

中括号裡的items, title和template就是MockCarouselComponent使用@Input()指定的三個屬性，等号右邊的items, t i t l e , title,title和carouseItem都是另一個Component本身的屬性。

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