angular组件之间通信（笔记）

1.父传子
1.1.通过Input
在父组件上绑定属性或者方法,在子组件xxx.componet.ts中 导入Input类, 进行接收,可以获取父组件传过来的内容

<app-home [msg] = 'msg' [run]='logApp' [home]='this'></app-home>
// msg是数据  logApp是方法名   this是这个组件的对象

子组件.component.ts

import {Input} from '@angular/core';

@input() msg:string;
@input() run:any;
@input() home:home;
// 使用的时候用this.msg进行调用

2.子传父
2.1通过viewChild
在父组件.html 给子组件标签绑定上 #xxx 通过@viewChild 获取子组件的对象 就可以获取子组件的数据以及调用子组件的方法

//这是子组件ts定义的数据
public msg: string = "我是子组件msg";
// 这是父组件.html  绑定#xxx属性
<app-news #newsChild></app-news>

// component.ts
import { ViewChild } from '@angular/core';
​
-----------------------
// 获取到news对象 就是组件
@viewChild('newsChild') msg: any;
console.log(this.msg);
// 使用的时候用this.msg进行调用

2.2通过Output & eventEmitter
通过引入Output 和eventEmitter 可以设置自定义事件 从而使父组件使用子组件的数据和方法
第一步 在子组件中引入Output 以及 eventEmitter
import { Component, OnInit, Output,EventEmitter } from ‘@angular/core’;
第二步
@Output private outer = new EventEmitter()
第三步,定义一个方法 在方法中通过emit 调用父组件的方法
setData(){
this.outer.emit(‘我是子组件的数据’)
}
第四步, 在父组件中的标签上设置事件

// html
<app-foot (outer)="getData($event)"></app-foot>
// ts
getData(msg:string){
    console.log(msg);
  }

注意点: 在父组件.html中绑定方法的时候 方法名必须和子组件.component.ts中 通过 new eventEmitter()实例出的对象一致, 不然就会出现错误

3.非父子之间的传值
3.1通过service 服务可以进行传值

3.2通过本地存储 localStorage sessionStorage