架构

1、组件

@[Component](https://www.angular.cn/api/core/Component)
@component装饰器会指出紧随其后的那个类是个组件类，并为其指定元数据.

属性：providers 是当前组件所需的依赖注入提供商的一个数组。在这个例子中，它告诉 Angular 该如何提供一个 HeroService 实例，以获取要显示的英雄列表。

2、服务

@[Injectable](https://www.angular.cn/api/core/Injectable)
在 Angular 中，要把一个类定义为服务，就要用@Injectable装饰器来提供元数据，以便让 Angular 可以把它作为依赖注入到组件中

依赖注入（或 DI）让你可以保持组件类的精简和高效。有了 DI，组件就不用从服务器获取数据、验证用户输入或直接把日志写到控制台，而是会把这些任务委托给服务。

3、管道

@[Pipe](https://www.angular.cn/api/core/Pipe) 装饰器的类中会定义一个转换函数，用来把输入值转换成供视图显示用的输出值。

生命周期

ngOnChanges：当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在ngOnInit之前。
ngOnInit：在第一轮ngOnChanges完成之后调用。
ngDoCheck：在每个Angular变更检测周期中调用。
ngAfterContentInit：当把内容投影进组件之后调用。
ngAfterContentChecked：每次完成被投影组件内容的变更检测之后调用。
ngAfterViewInit：初始化完组件及其子视图之后调用。
ngAfterViewChecked：每次做完组件视图和子视图的变更检测之后调用。
ngOnDestroy：当Angular每次销毁指令/组件之前调用。

组件交互

@Input 装饰器

和component 的inputs数组作用相似。为组件定义对应输入型属性
可以通过设定setter来监听属性值变化
监听多个属性变化可以用这个：ngOnChanges()

@Output 装饰器

父组件监听子组件的事件

子组件暴露一个 [EventEmitter](https://www.angular.cn/api/core/EventEmitter) 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。

子组件的 [EventEmitter](https://www.angular.cn/api/core/EventEmitter) 属性是一个输出属性，通常带有@Output 装饰器，就像在 VoterComponent 中看到的。

@[Output]() voted =  new  [EventEmitter]();

向上弹射事件

this.voted.emit(agreed);

父组件可以绑定事件处理器(voted)="func($event)"来响应子组件事件

父组件与子组件通过本地变量互动(只能在模板访问)

timer为子组件的引用,父组件可以用#timer来访问子组件里的属性和方法。

父组件调用@ViewChild()

这个本地变量方法是个简单便利的方法。但是它也有局限性，因为父组件-子组件的连接必须全部在父组件的模板中进行。父组件本身的代码对子组件没有访问权。

如果父组件的类需要读取子组件的属性值或调用子组件的方法，就不能使用本地变量方法。

当父组件类需要这种访问时，可以把子组件作为 ViewChild，注入到父组件里面。

下面的例子用与倒计时相同的范例来解释这种技术。它的外观或行为没有变化。子组件CountdownTimerComponent也和原来一样。

import { CountdownTimerComponent }  from './countdown-timer.component';

@[ViewChild](CountdownTimerComponent)
private timerComponent:  CountdownTimerComponent;

ng6

架构