如何在 parent 和 child 组件之间通信，在 angular

Question

parent

HTML 文件

<child [validatedMessage]="message" ></child>

ts 文件

public message = new BehaviorSubject < {} > (undefined);

public ButtonClick() {
  this.service.getDetails(Details).subscribe((result) => {
    if (result) {
      this.message.next({
        result: result
      });
    }
  })
}

child

ts 文件

@Input() public validatedMessage: BehaviorSubject < {} > ;

ngOnChanges() {
  this.doSomething(this.validatedMessage);
}

doSomething(validatedMessage: BehaviorSubject < {} > ) {
  alert("im in")
}

这里发生的事情是，首次加载页面时会出现警报消息。但我想在服务功能 API 成功时收到警报消息。

我该怎么做？我做错了什么？

Answer 1

这里的问题是您只在 ParentComponent 中初始化了 message 一次。当您将新值向下传递到 Observable 流时，对 message BehaviorSubject 的实际引用不会改变。

这就是为什么 ChildComponent 上的 ngOnChanges 仅在应用程序加载时调用，然后在 message 下推新消息时不调用的原因 BehaviorSubject 的 Observable 流。

接受 validatedMessage 作为 ChildComponent 中的常规 string 并使用 async 管道将其作为 @Input 道具传递给它ParentComponent 的模板。 ParentComponent 模板中的类似内容：

<child [validatedMessage]="message | async" ></child>

并且在 ChildComponent:

@Input() public validatedMessage: string ;

ngOnChanges() {
  this.doSomething(this.validatedMessage);
}

doSomething(validatedMessage: string) {
  alert("im in")
}

Answer 2

我会说你让它变得不必要地复杂了。这里不需要使用 BehaviorSubject。您可以将普通 object 绑定到 child 组件。当对变量绑定的引用发生变化时，将触发 ngOnChanges 挂钩。

尝试以下方法

Parent

public message: any;

public ButtonClick() {
  this.service.getDetails(Details).subscribe(
    (result: any) => {
      if (result) {
        this.message = JSON.parse(JSON.stringify({ result: result }));
      }
    },
    (error: any) => {
      // handle error 
    }
  );
}

Child

@Input() public validatedMessage: any;

ngOnChanges() {
  this.doSomething(this.validatedMessage);
}

doSomething(validatedMessage: any) {
  alert("im in")
}

如何在 parent 和 child 组件之间通信，在 angular

how to communicate between parent and child components , in angular

http

typescript

angularjs-directive

angular