Angular6+ 父子组件以及组件之间通讯

一、父组件给子组件传值 – @input

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

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

2. 子组件引入 Input 模块

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

3. 子组件中 @Input 接收父组件传过来的数据

export class HeaderComponent implements OnInit {@Input() msg:stringconstructor() { }ngOnInit() {}
}

4. 子组件中使用父组件的数据

这是头部组件--{{msg}}

二、子组件通过@Output 触发父组件的方法

1. 子组件引入 Output 和 EventEmitter

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

2.子组件中实例化 EventEmitter

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

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

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

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

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

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

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

1.调用子组件给子组件定义一个名称

2. 引入 ViewChild

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

3. ViewChild 和刚才的子组件关联起来

@ViewChild('footerChild') footer;

4.调用子组件

run(){this.footer.footerRun();
}

四、非父子组件通讯

1、公共的服务
2、Localstorage (推荐)
3、Cookie

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！