Angular 组件通信

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

父组件不仅可以给子组件传递简单的数据，还可把自己的方法以及整个父组件传给子组件
1.父组件调用子组件的时候传入数据
这句话就是说：父组件定义了一个变量msg，在子组件标签上定义一个属性msg接收这个变量；之所以属性名和变量名得名字是一样的是为了方便记忆，如果属性名是aaa，变量名是msg，写代码的时候就得记忆哪个属性名表示msg变量。
父组件的ts:

public msg:any='父组件的msg'
run(){
  console.log("父组件的run方法")
}

父组件的html:

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

2. 子组件引入 Input 模块 在子组件中引入

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

3. 子组件中 @Input 接收父组件传过来的数据； 这里的msg是指的属性msg,需要与子标签名上的属性保持一致

export class HeaderComponent implements OnInit {
  constructor() { }
  @Input() msg: any;
  @Input() run: any;
  getRun() {
    this.run();
  }
}
}

4. 子组件中使用父组件的数据 这里的msg就是属性msg

<header>
    这里是头部组件---{{msg}}
</header>
<button (click)="getRun()"> 按钮</button>

二、父组件通过@ViewChild 主动获取子组件的数据和方法 类似于dom操作

1.调用子组件给子组件定义一个名称
news组件的html:

<app-header [title]="title"></app-header>
<h1>news</h1>
<app-footer #footer></app-footer>
<button (click)="getMsg()">获取msg</button>
<button (click)="getRun()">执行子组件的方法</button>

2.引入 ViewChild
news组件的ts：

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

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

@ViewChild('footer')footer:any;

4.调用子组件
父组件的ts:

getRun(){
this.footer.run();
}
getMsg(){
 console.log(this.footer.msg);
}

三、非父子组件通讯

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