Angular 4同时激活父组件和子组件

Question

我写了一些插图来说明我的问题:LINK

我需要为父组件设置动画,同时我想在子组件中制作一些动画.看起来angular是阻止子组件上的动画,然后简单地在父动画结束后跳转状态而没有任何转换.

是否有任何方法可以使动画并行工作,或至少链接而不使用回调？

@Component({
  selector: 'outer',
  template: `
    <div [@state]="state" (mouseenter)="state='wide'" (mouseleave)="state='narrow'" style="background-color: red;">
      <inner [stateInner]="state"></inner>
    </div>`,
  animations:[
    trigger('state', [
      state('narrow', style({
        width: '100px'
      })),
      state('wide', style({
        width: '400px'
      })),
      transition('* => *', animate('500ms'))
    ])  
  ]
})
export class Outer {
  public state: string = 'narrow';
  constructor() {
  }
}


@Component({
  selector: 'inner',
  template: `
    <div [@stateInner]="stateInner">
      <h2>Hello</h2>
    </div>`,
  animations:[
    trigger('stateInner', [
      state('narrow', style({
        height: '100px'
      })),
      state('wide', style({
        height: '400px'
      })),
      transition('* => *', animate('500ms'))
    ])  
  ]
})
export class Inner {
  @Input() stateInner: string = 'narrow';
  constructor() {
  }
}

Answer 1

我想说，使用回调是为将来的代码处理此问题的最佳方法，但如果您只需要让它工作，技巧就是使用OnChanges、SimpleChanges和 setTimeout()。

使用 Plunker来展示它是如何工作的，以及内部 div 代码的主要变化：

进口

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

模板

  template: `
    <div [@stateInner]="localChange">
      <h2>Hello</h2>
    </div>

类导出

  localChange = 'narrow';

  ngOnChanges( changes: SimpleChanges ) {
    console.log(changes)
    setTimeout( () => this.localChange = changes.stateInner.currentValue, 500);
  }