无法直接触发兄弟组件方法,但是有一种方法可以使用import { BehaviorSubject } from 'rxjs';
来触发兄弟组件事件。
我使用这种方法将数据传递给兄弟组件,但如果您触发事件,它也可以工作。
首先,您需要创建一个服务,我称其为DataService.ts
。
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private triggerEventMsg = new BehaviorSubject(false);
triggerEvent = this.triggerEventMsg.asObservable();
constructor() { }
triggerEvent(val: boolean) {
this.messageSource.next(message)
}
}
现在一个组件可以触发另一个组件,目前是Com1触发Com2事件。
Com1通过传递布尔值来触发DataService的triggerEvent。
Com1.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-com1',
template: `
{{message}}
<button (click)="newMessage()">New Message</button>
`
})
export class Com1 implements OnInit {
constructor(private data: DataService) { }
ngOnInit() {
}
com1ClickEvent() {
this.data.triggerEvent(true);
}
}
当数据发生变化时,观察Com2组件中触发该方法的变量。
Com2.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'app-com2',
template: `
<p>Com2</p>
`
})
export class Com2 implements OnInit {
constructor(private data: DataService) { }
ngOnInit() {
this.data.triggerEventMsg.subscribe(message => {
})
}
}