动画容器

Question

我正在开发一个更大的应用程序，我们对模块使用延迟加载。在我们加载一个模块之后，在某些情况下，一个组件会被渲染为<ng-container><ng-container>. 问题是，在容器上定义的动画没有被调用。

我创建了一个虚拟的 stackblitz 示例来演示我的意思：链接

app.component.html：

<ng-container *ngIf="visible" [@myAnimation]>
    <hello [ngStyle]="{'top': '50px'}" name="not animated"></hello>
</ng-container>

<hello name="animated" [ngStyle]="{'top': '100px'}" *ngIf="visible" [@myAnimation]></hello>

<button (click)="toggle()">Toggle visibility</button>

app.component.ts:

import { Component } from '@angular/core';
import {animate, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger("myAnimation", [
            transition(":enter", [
                style({opacity: 0 }),
                animate(
                    "800ms",
                    style({
                        opacity: 1
                    })
                ),
            ]),
            transition(":leave", [
                style({opacity: 1 }),
                animate(
                    "800ms",
                    style({
                        opacity: 0
                    })
                ),
            ]),
        ]),
  ]
})
export class AppComponent  {
  name = 'Angular';
  visible = false;

  toggle() {
    this.visible = !this.visible;
  }
}

你好.component.ts：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

Answer 1

您应该提供[@myAnimation]hello 组件，否则将无法从ng-container.

<ng-container *ngIf="visible">
    <hello [ngStyle]="{'top': '50px'}" name="not animated" [@myAnimation]></hello>
</ng-container>

说明： 来自Angular 大学

ng-container 指令为我们提供了一个元素，我们可以将结构指令附加到页面的一部分，而无需为此创建额外的元素。

我们不能使用它来提供任何属性或添加类，它用于附加结构指令。它记录在Angular 中

Angular 是一个不会干扰样式或布局的分组元素，因为 Angular 不会将它放在 DOM 中。

实例：stackblitz