angular6组件通信

# Angular组件通信

## 1、父组件传递数据到子组件

- `@Input`：属性绑定，父组件向子组件传递数据

```js
// 父组件
import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘app-parent‘,
  templateUrl: `
    <div>
        <child-component [conent]="toChild"></child-component>
    </div>
  `,
  styles: ``
})
export class AppComponent {
  toChild: any = ‘data from parent‘;
  constructor() {}
}
```

```js
// 子组件
import {Component, Input} from ‘@angular/core‘;

@Component({
    selector: ‘child-component‘,
    templateUrl: `
    <div>
        <span>{{conent}}</span>
    </div>
    `,
    styles: ``
})

export class childComponent {
    @Input() conent: any;
    constructor() {
        // 输出： data from parent
        console.log(this.conent);
    }
}
```

## 二、子组件传递数据到父组件

- `@Output`：事件绑定，子组件向父组件传递数据的同时触发事件

```js
// 父组件
import { Component } from ‘@angular/core‘;

@Component({
  selector: ‘app-parent‘,
  templateUrl: `
    <div>
        <child-component (onSendData)="getChildData($event)"></child-component>
    </div>
  `,
  styles: ``
})
export class AppComponent {
  
  getChildData(e: any) {
    // 输出：data from child
    console.log(e)
  }
}
```

```js
// 子组件
import {Component, EventEmitter, Output} from ‘@angular/core‘;

@Component({
    selector: ‘child-component‘,
    templateUrl: `
    <div>
        <button (click)="handlerClick()">发送</button>
    </div>
    `,
    styleUrls: []
})

export class childComponent {
    @Output() onSendData: EventEmitter<any> = new EventEmitter();
    constructor() {}

    handlerClick(): void {
      this.onSendData.emit(‘data from child‘);
    }

}
```

## 三、订阅

- `Subject`：一种特殊类型的 `Observable`，允许将值多播到多个观察者 `Observer`

```js
// EventBusService
import { Injectable } from ‘@angular/core‘;
import { Subject, Observable } from "rxjs";

@Injectable({ providedIn: ‘root‘ })
export class EventBusService {
  constructor() { }

  private message$ = new Subject<CommonMessage>();

  sendMessage(message: CommonMessage) {
    this.message$.next(message);
  }

  clearMessage() {
    this.message$.next();
  }

  getMessage(): Observable<CommonMessage> {
    return this.message$.asObservable();
  }
}

class CommonMessage {
    public type: string;
    public data: Object;
}

```

```js
import { Component } from ‘@angular/core‘;
import { EventBusService } from ‘../eventBusService.service‘;

@Component({
  selector: ‘app-componentOne‘,
  templateUrl: ‘./componentOne.component.html‘,
  styleUrls: [‘./componentOne.component.css‘]
})
export class ComponentOneComponent implements OnInit {

  constructor(private eventBus: EventBusService) {}

  ngOnInit() {}

  sendMessage(): void { // 发送消息
    this.eventBus.sendMessage({
        type: ‘‘,
        data: {}
    });
  }

  clearMessage(): void { // 清除消息
    this.eventBus.clearMessage();
  }

}
```

```js
import { Component, OnInit } from ‘@angular/core‘;
import { EventBusService } from ‘../eventBus.service‘;

@Component({
  selector: ‘app-componentTwo‘,
  templateUrl: ‘./componentTwo.component.html‘,
  styleUrls: [‘./componentTwo.component.css‘]
})
export class ComponentTwoComponent implements OnInit {
  valueChanges:any;
  constructor(private eventBus: EventBusService) { }

  ngOnInit() {
      this.valueChanges = this.eventBus.getMessage().subscribe(res => {
        // 输出：{type: ‘‘, data: {}}
        console.log(res);
    })
  }

  ngOnDestroy() {
    // 取消订阅
    this.valueChanges.unsubscribe();
  }

}

```