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

简介: 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[];
}

image.png下图是在另一个Component UI里消费MockCarouselComponent:


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


image.png最后渲染出的html网页里,CarouselComponent这三个属性显示如下:image.png

相关文章
|
3月前
|
数据采集 缓存 JavaScript
运行在 CCV2 环境上的 Angular 服务器端渲染应用的性能瓶颈分析
运行在 CCV2 环境上的 Angular 服务器端渲染应用的性能瓶颈分析
24 0
|
3月前
|
存储 JavaScript API
运行在 SSR 模式下的 Angular 应用的内存泄漏问题分析
运行在 SSR 模式下的 Angular 应用的内存泄漏问题分析
35 0
|
12月前
|
缓存 前端开发 JavaScript
Javascript学习-angular开发环境搭建及新建项目并运行
Javascript学习-angular开发环境搭建及新建项目并运行
67 0
Javascript学习-angular开发环境搭建及新建项目并运行
|
存储 JavaScript API
运行在 SSR 模式下的 Angular 应用的内存泄漏问题分析
运行在 SSR 模式下的 Angular 应用的内存泄漏问题分析
87 0
运行在 SSR 模式下的 Angular 应用的内存泄漏问题分析
|
JavaScript
如何运行 Angular library 的原理图 Schematics
如何运行 Angular library 的原理图 Schematics
如何运行 Angular library 的原理图 Schematics
如何从Angular的ActivatedRoute数据结构中获得运行时路由信息
如何从Angular的ActivatedRoute数据结构中获得运行时路由信息
199 0
如何从Angular的ActivatedRoute数据结构中获得运行时路由信息
|
JavaScript API
Angular router-outlet占位符层级结构的子节点,运行时是如何插入的
Angular router-outlet占位符层级结构的子节点,运行时是如何插入的
163 0
Angular router-outlet占位符层级结构的子节点,运行时是如何插入的
每个施加在HTML元素上的Angular Directive,运行时都会生成一个新的实例
每个施加在HTML元素上的Angular Directive,运行时都会生成一个新的实例
67 0
每个施加在HTML元素上的Angular Directive,运行时都会生成一个新的实例
|
测试技术
Angular jasmine单元测试框架spec的运行时数据结构
Angular jasmine单元测试框架spec的运行时数据结构
67 0
Angular jasmine单元测试框架spec的运行时数据结构
推荐文章
更多