开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

社区首页 >专栏 >Angular Component 开发时属性和运行时属性的对照

Angular Component 开发时属性和运行时属性的对照

作者头像

Jerry Wang

发布于 2020-09-30 10:40:08

1.1K0

发布于 2020-09-30 10:40:08

举报

文章被收录于专栏：Jerry的SAP技术分享Jerry的SAP技术分享

看个具体的例子：

@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这三个属性显示如下：

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-09-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

0 条评论

热度

最新

LV.