发表于: 2019-12-02 20:08:07

1 1090


今天完成的事情:今天看了看ng6。打算过段时间做一做真实

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]<boolean>();

向上弹射事件

this.voted.emit(agreed);

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

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

<app-countdown-timer #timer></app-countdown-timer>

明天计划的事情:本来是打算做真实的。但是师弟的车队少了1个前段。。所以打算后面几天在师弟的车队里面做复盘。第一可以巩固一下知识。毕竟看了好久的文档的。这么长时间没写代码了。第二就是替他们车队减轻点压力。当然我也不会帮他们做太多,最多两三个模块就够了。不然他们车队俩前端。做着做着说不定心态就崩了。
遇到的问题:没什么问题。因为之前我用过ng7和vue2.0  所以现在血ng6的时候。感觉并不是多难。
收获:收获嘛。那就是大概了解了一下ng6的一些规则


返回列表 返回列表
评论

    分享到