提交弹出表单后显示通知消息答案

【问题标题】：show notify message after submitting popup form提交弹出表单后显示通知消息
【发布时间】：2020-06-22 16:14:27
【问题描述】：

我在按钮单击时显示一个弹出窗口，上面有一个表单。我想在提交表单时在父组件中有一条通知消息。为此，我注册了一个输出事件并将一个变量设置为 true。然后我在 te ngOnInit 事件中检查这个变量，如果它是真的，然后显示通知。但是通知没有显示。我认为，由于ngOnInit 事件首先触发，此时布尔值不正确。所以，问题是：如何让这项工作正常进行？

这是一个堆栈闪电战：https://stackblitz.com/edit/angular-dxpopup-rux5wz

【问题讨论】：

标签： angular

【解决方案1】：

您发送事件的方式，我们确定在父组件中调用formSubmitted() 函数时按下提交按钮。所以你可以立即在这个函数中触发通知。

export class AppComponent implements OnInit {
  ...

  formSubmitted() {
    this.submitted = true;
    notify({ message: "form submitted" }, "success", 2000);
  }

  ngOnInit() {
  }
}

但是每次按下提交按钮时页面都会重新加载。不确定这是否是预期的行为。

【讨论】：

最后，我不需要真正的提交和页面重新加载，因为我们在 Angular 中。我的问题实际上是由页面重新加载引起的。这给了我修改插入功能的提示。现在它起作用了。谢谢。

【解决方案2】：

您的代码存在多个问题。

在child.component.ts 中，您必须在formSubmit 上发出true 或false。

formSubmit() {
  this.submitButtonClicked.emit(true);
}

在app.component.ts中，把ngOnInit()的代码去掉，改成这样。

formSubmitted() {
  this.submitted = true;
  this.notifyMessage();
}

ngOnInit() { }

notifyMessage() {
  if (this.submitted) {
    notify({ message: "form submitted" }, "success", 2000);
  }
}

当您点击提交时，您可以看到下方的绿色通知。

【讨论】：