## 一、父组件传递数据到子组件 - `@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(); } }
Angular6 组件通信
猜你喜欢
转载自www.cnblogs.com/tianyou-songshao/p/12332173.html
今日推荐
周排行