Триггер angular - Получить статус

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.