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处显示警报。

当我将click事件显示为警报时，它会显示警报，但是如果我只是在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生命周期挂钩中完成与模板配合使用的所有逻辑，如前所述，只有在准备好与模板进行交互之后才会触发。

如果这导致ExpressionChangedAfterItHasBeenCheckedError，您可以将呼叫包装在

中

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

或手动强制detectChanges()

像上面那样将ChangeDetectRef注入到您的构造函数中，然后在ngAfterViewInit内像上面显示的那样调用detectChanges()。

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

1 个答案: