Angular入门实战Day06

注：以下内容来源教程 https://www.bilibili.com/video/BV1bt411e71b/?spm_id_from=333.337.search-card.all.click&vd_source=d24d4d209aa65e8fc37220ced9cbcf2f

---

一、Angular 父子组件以及组件之间通讯

1.父组件给子组件传值 @input

父组件不仅可以给子组件传递简单的数据，还可以把自己的方法以及整个父组件传给子组件。

• 父组件调用子组件的时候传入数据

<app-header [title]="title" [msg]="msg" [run]="run" [home]="this"></app-header>

export class HomeComponent {

  public title:string = '首页组件的标题';
  public msg:string = '我是父组件的msg';

  run() {
    alert('我是父组件的run方法');
  }

}

• 子组件引入 Input 模块

// 引入 Input 模块
import { Component, Input } from '@angular/core';

• 子组件中 @input 接收父组件传过来的值

export class HeaderComponent {
  // 接收父组件传来的数据
  @Input() title:any;
  @Input() msg:any;
  @Input() run:any;
  @Input() home:any;

  // 获取父组件的数据
  getParentMsg() {
    alert(this.msg);
  }

  getParentRun() {
    // 执行父组件的run方法
    // this.run();
    console.log(this.home.msg);
    this.home.run();
  }
}

2.父组件通过 @ViewChild 主动获取子组件的数据和方法

• 调用子组件，给子组件定义一个名称

<app-footer #footer></app-footer>

• 父组件引入 ViewChild 模块

import { Component, ViewChild } from '@angular/core';

• 获取子组件的数据，执行子组件的方法

export class NewsComponent {
  
  @ViewChild('footer') footer:any;

  getChildMsg() {
    // 获取子组件的数据
    alert(this.footer.msg);
  }

  getChildRun() {
    // 执行子组件的run方法
    this.footer.run();
  }
}

3.子组件通过 @Output 触发父组件的方法

• 子组件引入 Output 和 EventEmitter

import { Component, Output, EventEmitter } from '@angular/core';

• 子组件中实例化 EventEmitter

@Output() private outer = new EventEmitter<string>();
// EventEmitter 和 Output 装饰器配合使用 <string>指定类型变量

• 子组件通过 EventEmitter 对象 outer 实例广播数据

sendParent() {
	this.outer.emit('msg from child');
}

• 父组件调用子组件的时候，定义接收事件，outer 就是子组件的 EventEmitter 对象 outer

<app-header (outer)="runParent($event)"></app-header>

• 父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据

// 接收子组件传递过来的数据
runParent(msg:string) {
	alert(msg);
}

4.非父子组件通讯

• LocalStorage
• 服务

二、Angular 中的生命周期函数

按照官方文档，生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法，也叫生命周期钩子方法。

函数	说明
constructor()	非生命周期函数，构造函数中除了使用简单的值对局部变量进行初始化之外，什么都不应该做
ngOnChanges()	当 Angular（重新）设置数据绑定输入属性时响应。该方法接受当前和上一属性值的 SimpleChanges 对象；当被绑定的输入属性值发生变化时调用，首次调用一定会发生在 ngOnInit() 之前
ngOnInit()	在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后。初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用，只调用一次。使用 ngOnInit() 有两个原因：1、在构造函数之后马上执行复杂的初始化逻辑；2、在 Angular 设置完输入属性之后，对该组件进行准备
ngDoCheck()	检测，并在发生 Angular 无法或不愿意检测的变化时作出反应，在每个 Angular 变更检测周期中调用，ngOnChanges() 和 ngOnInit() 之后
ngAfterContentInit()	当把内容投影进组件之后调用。第一次 ngDoCheck() 之后调用，只调用一次
ngAfterContentChecked	每次完成被投影组件内容的变更检测之后调用。ngAfterContentInit() 和每次 ngDoCheck() 之后调用
ngAfterViewInit()	初始化完组件视图及其子视图之后调用。第一次 ngAfterContentChecked() 之后调用，只调用一次
ngAfterViewChecked()	每次做完组件视图和子视图的变更检测之后调用。ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用
ngOnDestroy()	当 Angular 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏