触发角度-获取状态

Question

我有这个触发我的组件：

trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
      state('expanded', style({ height: '400px', visibility: 'visible', overflow: 'auto' })),
      transition('void <=> *', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ]

我问是否有任何方法可以在MyComponent.ts中检查此触发状态？

Answer 1

您实际上可以将状态绑定到局部变量，并在定义的状态之间进行转换，而不是void <=> *。

控制器

@Component({
  ...,
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
      state('expanded', style({ height: '400px', visibility: 'visible', overflow: 'auto' })),
      transition('collapsed <=> expanded', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ])
  ]
})
export class AppComponent {
  detailState = 'collapsed';    // <-- default state
  ...

  toggleState() {
    this.detailState = 'collapsed' ? 'expanded' : 'collapsed';
  }
}

模板

<div [@detailExpand]="detailState"></div>

<button (mouseup)="toggleState()">Toggle</button>

现在，当前状态位于变量detailState中。