此文章是用markdown书写，赋值全部到vscode打开即可。
# Angular组件通信 ## 、父组件传递数据到子组件 - `@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();
} } ```