父子组件以及组件之间通讯
父组件给子组件传值 @input
- 父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件
- 父组件调用子组件的时候传入数据
<app-header1 [msg]="msg"></app-header1>
1
- 子组件引入 Input 模块
//header1.component
import { Component, OnInit,Input } from '@angular/core';
1
2
2
- 子组件中 @Input 接收父组件传过来的数据
//header1.component
export class HeaderComponent implements OnInit {
@Input() msg:any;
ngOnInit() {
}
}
1
2
3
4
5
6
2
3
4
5
6
- 子组件中使用父组件的数据
<!-- header1.component.html -->
<div class="msg">
{{msg}}
</div>
1
2
3
4
2
3
4
二、父组件通过@ViewChild 主动获取子组件的数据和方法
- 调用子组件给子组件定义一个名称
<!-- 父组件 -->
<app-footer1 #footer ></app-footer1>
1
2
2
- 引入 ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core'
1
- ViewChild 和刚才的子组件关联起来
@ViewChild('footer',{static:false}) footer:any;
1
- 调用子组件
getChild() {
// console.log(this.footer)
// console.log(this.footer.msg)
this.footer.run()
}
1
2
3
4
5
2
3
4
5
三、获取整个父组件实例
- 父组件调用子组件时，定义变量=this,指代父组件
<!-- 父组件,自定义一个变量，this指代父组件 -->
<app-header1 [run]='run' [home]='this'></app-header1>
1
2
2
- 子组件中通过 @Input接收父组件数据
import { Component, OnInit,Input } from '@angular/core';
//父组件方法
@Input() run:any;
//整个父组件
@Input() home:any;
getPerentRun() {
//执行父组件的方法
// this.run()
//接收整个父组件
console.log(this.home)
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
四、子组件通过@Output 触发父组件的方法
1. 子组件引入 Output 和 EventEmitter
```ts
//子组件
import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core'
1
2
3
4
2
3
4
- 子组件中实例化 EventEmitter
//子组件
/*用 EventEmitter 和 output 装饰器配合使用 <string>指定类型变量*/
@Output() private outer = new EventEmitter<string>();
1
2
3
2
3
- 子组件通过 EventEmitter 对象 outer 实例广播数据
//子组件
sendParent() {
this.outer.emit('子组件的数据广播给父组件')
}
1
2
3
4
2
3
4
- 父组件调用子组件的时候，定义接收事件 , outer 就是子组件的 EventEmitter 对象 outer
<!-- 父组件html -->
<app-footer1 #footer (outer)="getSunMethod($event)"></app-footer1>
1
2
2
- 父组件接收到数据会调用自己的 runParent 方法，这个时候就能拿到子组件的数据
getSunMethod(e) {
console.log(e)
}
1
2
3
2
3
五、非父子组件通讯
- 公共的服务
- Localstorage (推荐)
- Cookie
← Angular中的dom操作 生命周期函数 →