Question

我想在没有父子关系的情况下调用 componentOne 中 ComponentTwo 的myrole()。 ComponentOne是主要组件。单击MyRoleClick()后，我要调用ComponentTwo的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

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

在没有任何父子关系的情况下，将其他组件中的函数调用成角度的电流

2 个答案: