ts文件下载 Angular学习笔记（一）(3)

当用户在这个应用中漫游时， Angular 会创建、更新和销毁组件。 应用可以通过生命周期钩子在组件生命周期的各个时间点上插入自己的操作，例如上面声明的ngOnInit()。

我们通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在，告诉 Angular 如何渲染组件。

多数情况下，模板看起来很像标准 HTML，当然也有一点不同的地方。下面是HeroListComponent组件的一个模板：

src/app/hero-list.component.html

<h2>Hero List</h2>

<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>

<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

模板除了可以使用像<h2>和<p>这样的典型的 HTML 元素，还能使用其它元素。 例如，像*ngFor、{{hero.name}}、(click)、[hero]和<hero-detail>这样的代码使用了 Angular 的模板语法。

在模板的最后一行，<hero-detail>标签就是一个用来表示新组件HeroDetailComponent的自定义元素。

HeroDetailComponent跟以前见到过的HeroListComponent是不同的组件。HeroDetailComponent（代码未显示）用于展现一个特定英雄的情况，这个英雄是用户从HeroListComponent列表中选择的。HeroDetailComponent是HeroListComponent的子组件。

注意到了吗？<hero-detail>舒适地躺在原生 HTML 元素之间。 自定义组件和原生 HTML 在同一布局中融合得天衣无缝。

元数据告诉 Angular 如何处理一个类。

HeroListComponent就会明白：它只是一个类。 一点框架的痕迹也没有，里面完全没有出现 "Angular" 的字样。

实际上，HeroListComponent真的只是一个类。直到我们告诉 Angular它是一个组件。

要告诉 AngularHeroListComponent是个组件，只要把元数据附加到这个类。

在TypeScript中，我们用装饰器 (decorator)来附加元数据。 下面就是HeroListComponent的一些元数据。

src/app/hero-list.component.ts (metadata)

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

这里看到@Component装饰器，它把紧随其后的类标记成了组件类。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-55834-3.html