Angular英雄编辑器中的组件

     组件控制屏幕上被称为视图的一小片区域。比如，带有导航链接的应用根组件。英雄列表。英雄编辑器。
     你在类中定义组件的应用逻辑，为视图提供支持。组件通过一些由属性和方法组成的API与视图交互。
     比如，HeroListComponent 中有一个名为heroes的属性，它储存着一个数组的英雄数据。 HeroListComponent 还有一个 selectHero() 方法，当用户从列表中选择一个英雄时，它会设置 selectedHero 属性的值。该组件会从服务获取英雄列表，它是一个 TypeScript 的构造器参数型属性。本服务通过依赖注入系统提供给该组件。

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

当用户在应用中穿行时，Angular就会创建、更新、销毁一些组件。你的应用可以通过一些可选的生命周期钩子（比如ngOnInit（））来在每个特定的时机采取行动。

组件的元数据

     @Component 装饰器会指出紧随其后的那个类是个组件类，并为其指定元数据。在下面的范例代码中，你可以看到 HeroListComponent 只是一个普通类，完全没有 Angular 特有的标记或语法。直到给它加上了 @Component 装饰器，它才变成了组件。
     组件的元数据告诉 Angular 到哪里获取它需要的主要构造块，以创建和展示这个组件及其视图。具体来说，它把一个模板（无论是直接内联在代码中还是引用的外部文件）和该组件关联起来。该组件及其模板，共同描述了一个视图。除了包含或指向模板之外，@Component 的元数据还会配置要如何在 HTML 中引用该组件，以及该组件需要哪些服务等等。
     下面的例子中就是 HeroListComponent 的基础元数据：

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

     这个例子展示了一些最常用的@Component配置选项：
     selector：是一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。比如，如果应用的 HTML 中包含，Angular 就会在这些标签中插入一个 HeroListComponent 实例的视图。
     templateUrl：该组件的 HTML 模板文件相对于这个组件文件的地址。另外，你还可以用 template 属性的值来提供内联的 HTML 模板。这个模板定义了该组件的宿主视图。
     providers：当前组件所需的服务提供商的一个数组。在这个例子中，它告诉 Angular 该如何提供一个 HeroService 实例，以获取要显示的英雄列表。

Angular英雄编辑器中的组件

组件的元数据

猜你喜欢