【Angular】Angula6中的组件通信

37次阅读

共计 1969 个字符，预计需要花费 5 分钟才能阅读完成。

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.ts
import {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
优点：真正的发布订阅模式，当数据改变时，订阅者也能得到响应
service
import {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;
});
}
三、其他的通信方式