Angular OnChanges 为输入变量触发，但变量未更新答案

【问题标题】：Angular OnChanges firing for Input variable, but variable is not updatingAngular OnChanges 为输入变量触发，但变量未更新
【发布时间】：2021-01-22 11:50:44
【问题描述】：

这是我正在尝试做的一件非常简单的事情，而且我以前从未遇到过这个问题，所以希望有人能解释我在这里做错了什么。我这里有一个简单的父子组件关系，一个 Input 变量进入 ChildComponent。

关于更多上下文，ChildComponent 是一个引导模式。此外，我还有另一个 ChildComponent，它使用 Output EventEmitter 将被点击的对象发送到 ParentComponent，作为输入发送到模态。

至于问题，我实现了 OnChanges，它检测到 Input 的变化很好，我可以看到这个对象被发送到模态组件中。但是，当模式打开时，输入变量是未定义的。此外，当我关闭模式时，它仍然是未定义的。因此，在此过程中，我做错了什么。这里有一些代码可以提供帮助：

发送初始对象的子组件

alertPopup(alert:Notification) {
  this.notifyAlert.emit(alert);
}

ParentComponent 函数从 ChildComponent 中获取对象，并将其发送到模态 ChildComponent

showPopup(alert:Notification) {
  this.selectedNotification = alert;
  this.$('#alert-modal').modal({backdrop: 'static'});
}

还有我放置模态 ChildComponent 的 html，其中包含 selectedNotification

<app-alert-popup [notification]="selectedNotification"></app-alert-popup>

模态子组件代码

@Input() notification:Notification;

constructor(private dateService:BusinessDateService) { }

ngOnInit(): void { }

ngOnChanges(changes:SimpleChanges) {
  // here, the changes show appropriately, indicating the Input does in fact change
  console.log(changes);
  // and even further, this also shows the actual variable with the correct value
  console.log(this.notification);
}

close() {
  // here, the console log shows undefined when the modal closes
  console.log(this.notification);
  this.$('#alert-modal').modal('toggle');
}

ack() {
  this.close();
}

所以，如果我不得不猜测这是某种时间问题，但我不确定如何解决。我尝试在 ParentComponent selectedNotification 变量更改后添加 1 秒的睡眠，但这也不起作用。我可以根据需要提供任何其他信息，谢谢您的帮助！

【问题讨论】：

标签： angular typescript

【解决方案1】：

嗯，答案与这些都没有关系。我在放置模态组件的 html 文件中进行了更改，并且 Angular 更改检测从未对其进行检测，导致组件被渲染两次。无论出于何种原因，这都是导致问题的原因。

【讨论】：