ngOnit 上未显示自定义警报组件

Question

我尝试从这篇文章中实现以下 Alert 组件实现：

http://jasonwatmore.com/post/2017/06/25/angular-2-4-alert-toaster-notifications

更新：Angular material create alert similar to bootstrap alerts 我用这个，它很相似，但不使用数组。

以上代码，可以触发 AlertService 然后让它产生错误。我遇到的问题是它没有在启动时显示警报，并且我的组件的 ngOnInit 触发了 alertService。

当我将点击事件显示警报时，它会显示警报，但如果我只是在我的 ngOnit 中调用它则不会：

export class CustomComponent implements OnInit {

  constructor(
    private readonly route: ActivatedRoute,
    private alertService: AlertService,
  ) {}

  ngOnInit(): void {
    this.role = this.authenticationService.getRole();
    this.alertService.info('test alert message!');
    this.getDataFromRoute();
  }
}

在我的模板中，我只有 <alert></alert> 或任何选择器。

如果我需要提供比链接已经提供的更多的代码，请告诉我。我认为不需要它，因为代码只是直接复制粘贴。

TL;DR：按钮单击事件时会显示警报，但如果您只是希望它出现在页面加载时，则不会。

Answer 1

问题可能是视图没有准备好，Angular 提供了一个生命周期钩子，当视图准备好时会触发，试试这个。这是Angular Documentation。如果您可以通过单击按钮使其工作，那么这可能会很好地工作。

解决方案

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

class MyComponent implements AfterViewInit {

constructor (private cd: ChangeDetectorRef) { }

ngAfterViewInit(): void {
    this.alertService.info('test alert message!');
    this.cd.detectChanges();
  }
}

为什么

ngOninit 是处理有关设置组件/打开订阅的任何逻辑的理想场所，但请尽量避免在此处运行任何必须与您的模板 (HTML) 交互的逻辑。您会发现任何适用于模板的逻辑都应在 AfterViewInit Lifecycle 挂钩中完成，如上所述，这仅在模板准备好与之交互后触发。

如果这导致ExpressionChangedAfterItHasBeenCheckedError，您可以将调用包装在一个

setTimeout( () => { //logic here });

或手动强制detectChanges()

在您的构造函数中注入ChangeDetectRef，如上所示。然后在ngAfterViewInit 中调用detectChanges()，如上所示。