angular4学习记录 -- 组件通讯、生命周期

shadajin 发布于2019-08-21 16:45 / 264人阅读

摘要：每完成被投影组件内容发生变化时调用。每次做完组件视图和子组件视图的变更检测之后调用。组件销毁时调用，主要用于内存回收。策略策略是当组件的输入属性发生变更时才会检查当前组件及其子组件。

angular4 组件通讯、生命周期 主要通讯形式

父组件通过属性绑定到子组件，子组件通过事件传递参数到父组件

父组件通过局部变量获取子组件的引用

父组件使用@ViewChild获取子组件的引用

两个不相关联的组件使用中间人模式交互

终极大招:创建一个服务注入到组件中

直接把父组件当做服务注入到子组件中

组件的输入输出属性

输入输出属性必须是在有父子关系的组件间使用

输入属性

@Input() 
private keyword: string;

输出属性

@Output()
searchResult: EventEmmiter = new EventEmmiter();

使用中间人模式传递数据 组件生命周期以及angular的变化发现机制 生命周期

constructor

构造函数。

ngOnchanges

绑定属性发生变化的时候调用，第一次调用一定在ngOnInit之前。

ngOninit

第一轮ngChanges之后调用，本钩子只调用一次。

ngDoCheck

在ngOnInit和ngDoCheck之后，会一直检查。

ngAfterContentInit

当内容投影进组件之后调用。第一次ngDoCheck之后调用，只调用一次，只适用于组件。父组件调用完成之后，所有子组件才会调用。

ngAfterContentChecked

每完成被投影组件内容发生变化时调用。ngAfterContentInit和ngDocheck之后调用，只适用于组件。父组件调用完成之后，所有子组件才会调用。

ngAfterViewInit

初始化完成组件试图及其子视图之后调用。第一次ngAfterContentChecked之后调用，只调用一次，只适用于组件。所有子组件调用完成之后，父组件才会调用。此阶段更改属性的值会报错，可在settimeout后运行。

ngAfterViewChecked

每次做完组件视图和子组件视图的变更检测之后调用。ngAfterViewInit和ngAfterContentChecked之后调用，只适用于组件。所有子组件调用完成之后，父组件才会调用。此阶段更改属性的值会报错，可在settimeout后运行。

ngDoDestory

组件销毁时调用，主要用于内存回收。路由跳转时组件会销毁。

执行顺序：

constructor
    ↓
ngOnChanges
    ↓  
ngOnInit
    ↓
ngDoCheck
    ↓
ngAfterContentInit
    ↓
ngAfterContentChecked
    ↓
ngAfterViewInit
    ↓
ngAfterViewChecked

ngDoCheck
    ↓
ngAfterContentChecked
    ↓
ngAfterViewChecked
    ...
ngDestory

angular的变化发现机制 default策略

无论变更发生在哪个组件上，zone.js都将会检查整个angular组件树，从根组件appComponent开始，直至所有组件全部检查完成。

onpush策略

onpush策略是当组件的输入属性发生变更时才会检查当前组件及其子组件。

服务器托管海外云主机生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88684.html

Angular4学习笔记——组件之间的交互

摘要：具体思路子组件暴露一个属性，当事件发生时，子组件利用该属性向上弹射事件。父组件绑定到这个事件属性，并在事件发生时作出回应。这个组件子树之外的组件将无法访问该服务或者与它们通讯。父子组件通过各自的构造函数注入该服务。通过输入型绑定把数据从父组件传到子组件 Angular对于父组件 => 子组件的数据通信做法和Vue很相似。 // 父组件html模板 // 子组件接收数据 i...

Guakin_Huang 2019-08-21 17:48 评论0 收藏0
Angular4学习笔记——生命周期钩子

摘要：所以如果需要使用生命周期，只要在我们的代码中写上钩子函数即可，会找到并调用像这样的钩子方法，有没有接口无所谓。当使用构造函数新建一个组件或指令后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法用处当设置数据绑定输入属性发生变化时响应。接口和钩子在介绍生命周期的相关概念之前，可以先复习一下TypeScript对于接口的概念。在这里主要使用的是类接口及其实现： interf...

fizz 2019-08-21 17:48 评论0 收藏0
Angular2 VS Angular4 深度对比：特性、性能

摘要：的特性和性能是的超集，用于帮助的开发。注解提供了连接元数据和功能的工具。通过在库中提供基本信息可以调用函数或创建类的实例来检查相关元数据，从而简化了对象实例的构建。停用它会响应跳出旧控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web应用开发领域，Angular被认为是最好的开源JavaScri...

孙淑建 2019-08-20 18:37 评论0 收藏0
Angular4学习笔记——数据绑定

摘要：所以，在的世界中，唯一的作用是用来初始化元素和指令的状态。当进行数据绑定时，只是在与元素和指令的和事件打交道，而就基本上靠边站了，只有比较特殊的情况才会用到他。事件绑定事件名事件绑定分为对原生事件绑定和自定义事件绑定。数据绑定总体而言有三种类型： {{...}} 插值表达式绑定属性绑定（包括property和attitude 事件绑定插值表达式绑定既可以写在html结构中，...

MRZYD 2019-08-21 17:48 评论0 收藏0
Angular4之五服务器通讯

摘要：可以与任何支持与服务器进行通讯。首先，我们使用用语言创建一个服务器。一创建服务器步骤创建一个空的项目，取名为，名字可以按照情况而取。中，处理异步代码通常有种方式回调承诺可观察对象使用命令行组件名实例组件名为。运行时发生错误，提示改为则正常。 Angular可以与任何支持http与websocket服务器进行通讯。首先，我们使用node.js用typescript语言创建一个web服务...

Taste 2019-08-22 15:32 评论0 收藏0