索鸟网

  1. 首页
  2. angular4学习记录 -- 组件通讯、生命周期

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


angular4 组件通讯、生命周期

主要通讯形式

  1. 父组件通过属性绑定到子组件,子组件通过事件传递参数到父组件
  2. 父组件通过局部变量获取子组件的引用
  3. 父组件使用@ViewChild获取子组件的引用
  4. 两个不相关联的组件使用中间人模式交互
  5. 终极大招:创建一个服务注入到组件中
  6. 直接把父组件当做服务注入到子组件中

组件的输入输出属性

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

输入属性

@Input() 
private keyword: string;

输出属性

@Output()
searchResult: EventEmmiter<any> = 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策略是当组件的输入属性发生变更时才会检查当前组件及其子组件

typescript javascript angular4 angular.js

来源地址:https://segmentfault.com/a/1190000011346582 版权归作者所有!

相关教程

  • angular4学习记录 -- 路由

    Angular4 路由 路由时传递数据 1.在查询参数中传递数据 /product?id=1&name=2 => ActivateRoute.queryParams[id] 2.在路由路径中传递数据 {path:/product/:id} => /product/1 => ActivateRoute.params[id]
  • angular4 学习记录 -- 表单

    angular4 表单 模板表单 在app.module中导入FormsModule之后,项目中的form表单都会是一个ngForm,也就是一个模板表单。 import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { F
  • angular4学习记录 -- 依赖注入

    Angular4 依赖注入 什么是依赖注入 是指程序运行过程中,如果需要调用另一个对象协助时,无须在代码中创建被调用者,而是依赖于外部的注入 angular中依赖注入的具体使用 注入器: 在组件中的constructor中: constructor(private productService: ProductService){} 提供器: 在app根
  • React组件生命周期

      React是很火的前端框架,其最大的特点便是组件化。为了迎娶白富美,当上CEO,走上人生巅峰,对这么火的东东也有了一定的了解,但是对其生命周期一知半解,于是去官方网站瞅了几眼,结合本地实例,和大家共同学习下React组件的生命周期。如果英文比较好的同学可以直接到https://facebook.github.io/re... 查看。 创建一个Reac
  • react组件生命周期

    1. Component生命周期 生命周期 调用次数 能否使用 setSate() getDefaultProps 1(全局调用一次) 否 getInitialState 1 否 componentWillMount 1 是 render >=1 否 componentDidMount 1 是 componentWil
  • Angular4 动态加载组件杂谈

    最近接手了一个项目,客户提出了一个高大上的需求:要求只有一个主界面,所有组件通过Tab来显示。其实这个需求并不诡异,不喜欢界面跳转的客户都非常热衷于这种展现形式。 好吧,客户至上,搞定它!这种实现方式在传统的HTML应用中,非常简单,只是在这Angular4(以下简称ng)中,咋个弄呢? 我们先来了解下ng中动态加载组件的两种方式: 加载已经声明的组件
  • Angular2 VS Angular4 深度对比:特性、性能

    在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员来说,有以上两种选择是一件很棒的事情;但是,对于处于学习阶段的新晋开发人员来说,可能有点不知如何选择。 那么,本文将会对A
  • angular4学习记录 -- 数据绑定、响应式编程、管道

    angular4 数据绑定、响应式编程、管道 数据绑定 基本Html属性绑定 <td [attr.colspan]="tableColspan">Something</td> css类绑定 <div [class]="someExpression">something</div>