Angular 7动画触发器引发控制台错误，求助排查遗漏点

看起来你踩了一个很容易犯的Angular动画小坑！咱们来一步步拆解问题：

错误根源 #

你把动画触发器[@fadeInOut]直接加在了<app-global-alert>组件标签上，但这个触发器是注册在GlobalAlertComponent的animations数组里的——它的作用域仅限于该组件内部的模板元素，不能直接作用于组件本身的选择器。Angular找不到这个触发器在组件级别上的定义，所以才会抛出那个看似矛盾的错误（明明你已经导入了动画模块）。

修复步骤 #

只需要把触发器移到GlobalAlertComponent模板里控制显示的div上就行：

修改组件模板代码：

<div class="global-alert" *ngIf="globalAlert" [@fadeInOut]>
  <div class="global-alert-message"><ng-content></ng-content></div>
  <div class="close" (click)="closeGlobalAlert()"></div>
</div>

然后在父组件中使用app-global-alert时，不需要再加触发器：

<app-global-alert>Hello world</app-global-alert>

额外说明 #

如果之后你需要在组件级别应用动画（比如组件被添加/移除时的动画），可以在组件元数据里通过host属性绑定触发器，或者把触发器定义在父组件的animations数组中。但针对你当前的全局提示框场景，把触发器放在内部的显示容器上是最合理的做法，因为动画是随着提示框的显示/隐藏触发的。

内容的提问来源于stack exchange，提问作者Steve