调用函数从其他组件到角度的电流，没有任何父子关系

Question

我想在没有父子关系的组件一中调用组件二的myrole()。组件一是主要组件。单击MyRoleClick()后，我想调用组件二的myrole()

export class ComponentOne{
  MyRoleClick(){
     want to call myrole() of ComponentTwo without parent child relation here.
  }
}
export class ComponentTwo{
 myrole(){
 }
}

Answer 1

解决此问题的一个很好的解决方案是创建一个包含 rxjs 主题的服务，以便第一个组件可以订阅，第二个组件可以发出值以通知另一个组件它应该调用该函数

例

export class ComponentOne {
    constructor(private myService: MyService) {}
    ngOnInit() {
        this.myService.subject.asObservable().subscribe(() => this.myRoleClick())
    }
    myRoleClick() {
        // DO something
    }
}
export class ComponentTwo() {
    constructor(private myService: MyService) {}
    myRole() {
        this.myService.subject.next();
    }
}
export class MyService {
    subject = new Subject<void>();
}

Answer 2

我认为最干净的方法是构建一个在两个组件中使用的服务(即角色服务(。从第一个组件开始，在服务上调用该方法，在服务上创建一个可观察量，并向其发出值。 在您的第二个组件中订阅该可观察量。确保在结构中提供较高的服务(例如 app.module.ts(，以便组件将使用此服务对象的完全相同的实例。