如何动态设置角度状态数

Question

  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('slide', [
      state('1', style({ transform: 'translateX(0)' })),
      state('2', style({ transform: 'translateX(-50%)' })),
      transition('* => *', animate(300))
    ])
  ]
})

export class SlidePanelComponent {
  @Input() numberOfStatesToHave

... more code

如何使用@input装饰器动态设置角度状态数？

例如，如果@Input numberOfStatesToHave为3，我如何在@Component装饰器的动画“数组”中具有三个动画状态？而且还可以将值动态传递给transform CSS属性？

Answer 1

我认为这是不可能的。但是我对您的要求的建议如下。

const numberOfStatesToHave = localStorage.getItem('NUMBEROFSTATESTOHAVE')

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    changeDetection: ChangeDetectionStrategy.OnPush,
    animations: [
      trigger('slide', numberOfStatesToHave)
    ]
})

如果在调用此组件之前设置了该localStorage值