仅对新组件进行动画处理

Question

我正在尝试使用 Angular 2 中的新动画 API，并面临以下挑战：

我有一个父组件，它使用 *ngFor 显示一组子组件。 ngFor 在父组件中引用了一个简单的数据数组。

要求：

1. 当父组件和它的初始子组件一起渲染时，父组件和子组件应该立即渲染（没有动画）

1234563

如何配置动画来处理这个问题？

基本问题是：子组件如何知道它是作为其父组件初始化的一部分呈现还是稍后呈现？

一些可能的解决方案： - 我可以直接在数据对象上设置一个布尔变量，表示新对象是在视图之后创建的并且应该是动画的。该属性可以由组件检查。但是，我不想在数据模型中引入这种视图逻辑。 - 我可以使用父组件中的生命周期钩子在父组件中设置一个属性，该属性表示父组件已渲染，并且所有后续（新）子组件都应进行动画处理。但是，我无法做到这一点，因为似乎所有生命周期挂钩都在子组件实例化之前执行。

其他解决方案？

溴 安德斯

Answer 1

1. 您可以在父级中使用属性

initialLoad = true;

ngAfterViewInit() {
  this.initialLoad = false;
}

1. https://github.com/angular/angular/issues/7239#issuecomment-227369239 包含一个示例（使用 Plunker）：

@Component({
  selector: 'app',
  template: `
  <button (click)="items.push(items.length)">Add</button>
  <ul>
      <template ngFor let-item [ngForOf]="items" let-i="index">
          <li style="display: block;" @flyInOut="'in'" (click)="onClick(i)" *ngIf="!!item">{{ i }} - {{ item }}</li>
      </template>
  </ul>
  `,
  animations: [
        trigger('flyInOut', [
            state('in', style({ opacity: 1, transform: 'translateX(0) scaleY(1)' })),
            transition('void => *', [
                style({
                    opacity: 0,
                    transform: 'translateX(-100%)'
                }),
                animate('1s ease-in')
            ]),
            transition('* => void', [
                animate('1s 10 ease-out', style({
                    opacity: .5,
                    transform: 'scaleY(0.8)'
                }))
            ])
        ])
    ]
})

export class App {
  private items = [];
  constructor() { }

  onClick(index) {
    //this.items.splice(index,1);
    delete this.items[index];
  }
}

目前*ngFor 存在一个问题，该问题已在https://github.com/angular/angular/pull/10287 中得到修复，但尚未得到修复。