Angular6 组件通信
来源：互联网
## 一、父组件传递数据到子组件
- `@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();
}
}## 一、父组件传递数据到子组件
- `@Input`：属性绑定，父组件向子组件传递数据
```js
