父子组件通讯

非父子组件间变量通讯，可以存入window.localStorage中；

或者定义成服务；

子组件获取父组件变量、方法、父组件对象

1. 父组件typescript ```typescript import { Component, OnInit, ViewChild } from ‘@angular/core’;

@Component({ selector: ‘app-news’, templateUrl: ‘./news.component.html’, styleUrls: [‘./news.component.less’] }) export class NewsComponent implements OnInit {

// 定义变量msg、data

public msg:string = ‘父组件msg’; public data:string = ‘父组件data’;

constructor() { }

ngOnInit(): void { }

// 定义方法run

run() { console.log(‘父组件的run方法执行了’); } }

2. 
配置父组件的html模板
```html
<!-- 将msg/data变量赋值给子组件的msg/data变量 -->
<!-- 将父组件的run方法对象赋值给子组件的run变量 -->
<!-- 将父组件对象本身赋值给子组件的news变量 -->
<!-- [msg]为子组件定义的@Input()；'msg'为父组件的msg变量-->
<app-header [msg]='msg' [data]='data' [run]='run' [news]='this'></app-header>
<div></div>

1. 在子组件中获取相应变量 ```typescript // 引入Input装饰器 import { Component, OnInit, Input } from ‘@angular/core’;

@Component({ selector: ‘app-header’, templateUrl: ‘./header.component.html’, styleUrls: [‘./header.component.less’] }) export class HeaderComponent implements OnInit {

// 获取父组件传入的内容

@Input() msg:string; @Input() data:string; @Input() news:any; @Input() run:any;

ngAfterViewInit(): void {

  // 调用父组件传来的run方法对象
this.run();
console.log('------------');
  // 通过传进来的父组件本身调用其run方法
this.news.run();

}

}

4. 
在子组件上展示父组件的变量值
```html
<div>
    {{data}}
</div>
<div>
    {{msg}}
</div>

1. 可以在setter上添加@Input()截听输入属性值的变化 ```typescript import { Component, Input } from ‘@angular/core’;

@Component({ selector: ‘app-name-child’, template: ‘

“{{name}}”

@Input() set name(name: string) { this._name = (name && name.trim()) || ‘‘; } }

<a name="6a3b6a43"></a>
## 在子组件中主动调用父组件方法
> 通过@ViewChild可以让父组件主动调用子组件的方法、获取子组件的内容；
> 通过@Output()、EventEmitter可以让子组件主动调用父组件的方法，主动广播数据给父组件；
1. 
在子组件typescript中定义要广播的事件变量
```typescript
// 引入Output、EventMitter
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.less']
})
export class HeaderComponent implements OnInit {
    // 声明outputdata变量为eventemitter，泛型为emit载荷的类型
  @Output() outputdata = new EventEmitter<string>();
  sendParent() {
      // 向父组件广播数据：'子组件的outputdata传入的数据'
    this.outputdata.emit('子组件的outputdata传入的数据');
  }
}

1. 在子组件html模板中配置按钮触发sendParent方法

   <div>这是header子组件</div>
   <button (click)='sendParent()'>调用方法给父组件广播数据</button>
   <hr>

1. 在父组件的typescript中配置run方法，用于子组件主动调用 ```typescript import { Component, OnInit} from ‘@angular/core’;

@Component({ selector: ‘app-news’, templateUrl: ‘./news.component.html’, styleUrls: [‘./news.component.less’] }) export class NewsComponent implements OnInit {

// 传入的变量e即为子组件广播给父组件的数据

run(e) { console.log(‘这是父组件的run方法’); console.log(e); } }

4. 
在父组件html模板中配置子组件和子组件的output
```html
<!-- outputdata为子组件@Output的变量名,run为父组件的待调用方法,$event为子组件outputdata.emit的广播内容 -->
<app-header (outputdata)='run($event)'></app-header>
<div>
    这是父组件
</div>