注:以下内容来源教程 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 每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏 |