Question

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

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

对于问题，我实现了OnChanges，它可以很好地检测到Input的更改，我可以看到此对象已发送到模式组件中。但是，当模式打开时，Input变量未定义。而且，当我关闭模式时，它仍然是不确定的。因此，在此过程中我正在做某事。这里有一些代码可以帮助您：

发送初始对象的ChildComponent

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

ParentComponent函数，该函数从ChildComponent接收对象，并将其发送到模式ChildComponent

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

然后将html放到模态ChildComponent中，并放入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秒钟的睡眠时间，但这也不起作用。我可以根据需要提供任何其他信息，谢谢您的帮助！

Answer 1

好吧，答案与这一切根本无关。我对放置了模式组件的html文件进行了更改，并且Angular更改检测从未在其上进行，导致该组件呈现了两次。无论出于何种原因，这都是导致问题的原因。

输入变量的Angular OnChanges触发，但变量未更新

1 个答案: