【Angular】Angula6中的组件通信

Angula6_组件通信本文主要介绍 Angular6 中的组件通信一、父子组件通信1.1 父组件向子组件传递信息方法一 在父组件上设置子组件的属性父组件绑定信息<app-child childTitle=“可设置子组件标题”></app-child>子组件接收消息import { Component, OnInit, Input } from ‘@angular/core’;@Input childTitle: string;方法二 父组件调用子组件的方法父组件触发消息<app-child #child></app-child> <button (click)=“child.childPrint()"></button>子组件接收消息childPrint() { alert(“来自子组件的打印”);}1.2 子组件向父组件传递信息方法一 使用 EventEmitter子组件使用 EventEmitter 传递消息import { Component, OnInit, Output, EventEmitter } from ‘@angular/core’;…@Output() initEmit = new EventEmitter<string>();ngOnInit() { this.initEmit.emit(“子组件初始化成功”);}…父组件接收消息<app-child (initEmit)=“accept($event)"></app-child>accept(msg:string) { alert(msg);}方法二 使用 ViewChild子组件提供传递参数的函数sendInfo() { return ‘Message from child 1.’;}父组件使用 ViewChild 触发并接收信息<button (click)=“getInfo()">获取子组件1号的信息</button><h2>{{ info }}</h2>import { Component, OnInit, ViewChild } from ‘@angular/core’;…@ViewChild(ChildFirstComponent) private childcomponent: ChildFirstComponent;getInfo() { this.info = this.childcomponent.sendInfo();}二、非父子组件通信方法一 service缺点：需要双向的触发（发送信息 / 接收信息）service.tsimport { Component, Injectable, EventEmitter } from “@angular/core”;@Injectable()export class myService { public info: string = “”; constructor() {}}组件 1 向 service 传递信息import { myService } from ‘../../service/myService.service’;…constructor( public service: myService) { }changeInfo() { this.service.info = this.service.info + “1234”;}…组件 2 从 service 获取信息import { myService } from ‘../../service/myService.service’;…constructor( public service: myService) { }showInfo() { alert(this.service.info);}…方法二 使用 BehaviorSubject优点：真正的发布订阅模式，当数据改变时，订阅者也能得到响应serviceimport { BehaviorSubject } from ‘rxjs’;…public messageSource = new BehaviorSubject<string>(‘Start’);changemessage(message: string): void { this.messageSource.next(message);}组件调用 service 的方法传信息和接收信息changeInfo() { this.communication.changemessage(‘Message from child 1.’);}ngOnInit() { this.communication.messageSource.subscribe(Message => { window.alert(Message); this.info = Message; });}三、其他的通信方式路由传值cookie、session、storage参考文献《Angular6.x 学习笔记——组件详解之组件通讯》《angular6 组件间的交流方式》