如何通过 ngOnInit() 中的 'sending the message/calling the function' 在 Angular 中的兄弟组件之间传递数据？

Question

我想从 ComponentA 向 ComponentB 发送消息。我正在为此使用服务。这是代码- 我的问题是，如果我从 componentA 的 html 文件调用 sendInfoToB() （事件挂接到按钮单击），那么我将在 componentB /getting 中收到消息 console.log(this.check);和 console.log（消息）；控制台中的值.. 但是当我调用 this.sendInfoToB(true);从 componentA 的 ngOnInit() 然后我在 componentB 的控制台中没有收到任何消息。当我从 componentA 的 ngOnInit 调用时，我想要消息。我怎样才能做到这一点？请帮忙。提前谢谢你。

ComponentA.ts

constructor(private siblingService: SiblingService,) {}

public dataX: boolean = false;
someFunc(){
//some calculation returning true
  this.dataX = true;
}

ngOnInit() {
    this.someFunc();
    this.sendInfoToB();
}

sendInfoToB() {
    this.siblingService.communicateMessage(dataX);
}

message.service.ts

export class SiblingService {
    sendMessage = new Subject();
    constructor() {}

    communicateMessage(msg) {
        this.sendMessage.next(msg);

    }
}

ComponentB.ts

constructor(private sibService: SiblingService,) {}

ngOnInit() {
        
        this.sibService.sendMessage.subscribe((message) => {
            this.check = message;
            console.log(this.check);
            console.log(message);
        });
    }

Answer 1

这很可能与操作顺序有关。创建组件 A 并发送消息，然后创建组件 B 并订阅新消息。由于您使用的是主题，因此它只会在您订阅后后向您发送消息。

最简单的策略是使用 BehaviorSubject。

export class SiblingService {
    sendMessage = new BehaviorSubject();
    constructor() {}

    communicateMessage(msg) {
        this.sendMessage.next(msg);

    }
}

另一种方式是在初始化发生后发送消息，例如点击事件。

如何通过 ngOnInit() 中的 'sending the message/calling the function' 在 Angular 中的兄弟组件之间传递数据？

How to pass data between sibling components in Angular, by 'sending the message/calling the function' from ngOnInit()?

javascript

typescript

angular-services

angular