Angular 使用ngIf初始化角度动画

我目前的角度版本是：4.2.6

我正在使用angular的动画dsl为模态组件的打开设置动画。该组件嵌套在使用

*ngIf

显示/隐藏的另一个组件中

以下是页面结构的基本概述：

<parent-wrapper>

  <div class="panel" *ngIf="toggle">
    <child-component>
      <!-- Form Stuff -->
      <modal-component active="modalActive"></modal-component>
    </child-component>
  </div>

  <div class="panel" *ngIf="toggle2">
    <child-component>
      <!-- Form Stuff -->
      <modal-component active="modalActive"></modal-component>
    </child-component>
  </div>

</parent-wrapper>

模态组件必须与子组件一起打包，因此将其移动到另一个位置不是一个选项

---

当模态组件从

*ngIf

渲染时，是什么阻止了这些样式应用于模态DOM？

我不知道你的问题的答案，但解决方法是使用[hidden]来代替。我考虑过这一点，但是，使用ngIf的面板部分是内部库组件的一部分，我无法更改它而不影响我们的多个应用程序。不幸的是，这不是一个选项。请尝试将：host{display:block；}添加到您的模式样式中。我不知道您的问题的答案，但解决方法是使用[hidden]来代替。我考虑过这一点，但使用ngIf的面板部分是内部库组件的一部分，我无法在不影响多个应用程序的情况下进行更改。很遗憾，这不是一个选项。请尝试将：host{display:block；}添加到模态的样式中。

<app-modal class="ng-tns-c21-7" ng-reflect-active="inactive">
  <div class="app-modal ng-trigger ng-trigger-modalAnim">

<app-modal class="ng-tns-c21-7" ng-reflect-active="inactive">
  <div class="app-modal ng-trigger ng-trigger-modalAnim" style="z-index: 999; opacity: 1; display: block; transition: all;">