Javascript 父子沟通未按预期工作

我有两个部分，一个父母和一个孩子。 每次单击父组件中的某个按钮时，都会填充一个对象，并通过

@Input

装饰器将其发送给子组件

这里的问题是，即使在子组件中检测到对对象的更改，我尝试填充的数据也只会在偶数次单击时出现

这就是我的代码当前的样子：

parent.component.ts

private toSend = {};

public sendToChild() {
  var objectToSend = {
    headerMessage:`Title`, 
    bodyMessage:"Body"
  };
  this.toSend = { ...objectToSend };
  $('#childComponent').appendTo("body").modal('toggle');
}

public headerMessage: string = "";
public bodyMessage: string = "";

@Input('data')
set data(data: any) {
  if (data !== undefined && data.length !== 0) {
    this.setData(data);
  }
}

private setData(el): void {
  for (let key in el) {
    switch (key) {
      case "headerMessage":
        this.headerMessage = el[key];
        break;
      case "bodyMessage":
        this.bodyMessage = el[key];
        break;
    }
  }
}

parent.component.html

<child-component #childComponent [data]="toSend">
</child-component>

<div class="modal" tabindex="-1" role="dialog" id="childComponent">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header" style="padding: 1rem;">
        <h5 class="modal-title">{{headerMessage}}</h5>
        <button type="button" class="close" id="btn-close-id" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modal-body-id">
        <div class="container-fluid">
          <div class="col-12">
            {{bodyMessage}}
          </div>
        </div>
      </div>
      <div class="modal-footer" style="padding: 1rem;">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

child.component.html

<child-component #childComponent [data]="toSend">
</child-component>

<div class="modal" tabindex="-1" role="dialog" id="childComponent">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header" style="padding: 1rem;">
        <h5 class="modal-title">{{headerMessage}}</h5>
        <button type="button" class="close" id="btn-close-id" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modal-body-id">
        <div class="container-fluid">
          <div class="col-12">
            {{bodyMessage}}
          </div>
        </div>
      </div>
      <div class="modal-footer" style="padding: 1rem;">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{{headerMessage}}
&时代；
{{bodyMessage}}
接近

---

我还尝试了

ngOnChanges

，我可以打印每次发送的对象，但我也遇到了同样的问题。

您可以使用

ChangeDetectorRef

import { ..., ChangeDetectorRef } from '@angular/core';

将其添加到构造函数中

constructor(private _cdr: ChangeDetectorRef) {...}

在您的子组件中

this._cdr.markForCheck();
// or if not working
this._cdr.detectChanges()

---

另外，JQuery不建议使用Angular。如果你想在你的项目中使用模态，你应该检查或者制作你自己的模态组件。

你能创建一个stackblitz来创建这种情况吗？我也看到了jQuery语法。摆脱jQuery，它会弄乱您的DOM元素并导致不可预见的问题。您的组件具有“ChangeDetectionStrategy.OnPush”？我已经尝试使用ChangeDetectorRef，但问题仍然存在。。。我将尝试使用我自己的模式，看看这是否是导致问题的原因。有谁能参考一篇文章来解释使用jQuery与Angular的问题吗？我对这一切有点陌生。。。谢谢我能够通过使用BehaviorSubject在两者之间传递数据来解决这个问题。。。我尝试了这个模式：但仍然没有成功，所以jQuery似乎不是问题所在。我在子组件中完成for循环后尝试了，但仍然不起作用。。。我将尝试用我自己的一个来替换引导模式，看看angular团队提供的angular材质是什么，你应该真的尝试一下，或者至少检查一下源代码。