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

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

  def maybe_cache_http_requests(cassette)
    if ENV['CACHE_HTTP_REQUESTS'] == "1"
      require 'vcr'
      VCR.configure do |config|
        config.cassette_library_dir = "vcr_cassettes"
        config.hook_into :webmock
      end
      VCR.use_cassette(cassette) do
        yield
      end
    else
      yield
    end
  end

如果在调用此组件之前设置了const numberOfStatesToHave = localStorage.getItem('NUMBEROFSTATESTOHAVE') @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] changeDetection: ChangeDetectionStrategy.OnPush, animations: [ trigger('slide', numberOfStatesToHave) ] })值

Answer 2

进行研究后（由于@SplitterAlex的评论使我指出了正确的方向），我想出了一个解决方案。

要动态创建动画状态，您应该在@Components装饰器中包含动画逻辑，而应该使用angular的Animationbuilder。

这个stackblitz example帮助我理解了动画生成器的工作原理，因为它与@Component装饰器中的动画形成了鲜明的对比。

Here is my complete code，以动态方式设置角度的动画状态数。

如何动态设置角度状态数

2 个答案: