动画容器

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;
  }
}

hello.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

您应该在hello组件中输入[@myAnimation] ，否则将无法从ng-container获取hello组件的动画。

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

说明：来自Angular大学

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

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

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

实时示例： stackblitz