angular - 更改自定义 Storybook 附加组件后重新渲染组件

Question

我有一个使用 @storybook/angular 的自定义插件.每当附加组件中的某些值发生变化时，当前故事中的 Angular 组件应该重新渲染，因此它应该完全重新初始化。
我尝试使用 forceReRender()来自 @storybook/angular ，但似乎什么都不做。当我选择另一个故事并再次打开前一个故事时，由于组件被重新初始化，更改被应用。是否也有可能从附加组件内部实现这一点？

Answer 1

我在装饰器 + 工具栏设置方面遇到了类似的问题。
每当我的装饰者更改 props 中的值时，我需要强制初始化组件，而不是只更新绑定(bind)和调用更改检测。
所以我添加了一个包装组件来强制重新初始化故事:

// noinspection AngularMissingOrInvalidDeclarationInModule
/**
 * force the re-rendering of the story's components.
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'sb-force-rendering',
  template: '<ng-container #outlet></ng-container>',
})
export class ForceRenderingComponent implements AfterViewInit, OnDestroy {
  @ContentChild(TemplateRef) public template: TemplateRef<any>
  @ViewChild('outlet', { read: ViewContainerRef }) outletRef: ViewContainerRef

  public static render$: Subject<void> = new Subject<void>()
  private subscription: Subscription = new Subscription()

  constructor(private ngZone: NgZone) {}

  public ngAfterViewInit(): void {
    this.doRender()
    this.subscription.add(ForceRenderingComponent.render$.subscribe(() => this.doRender()))
  }

  public ngOnDestroy(): void {
    this.subscription.unsubscribe()
  }

  private doRender(): void {
    // storybook re-rendering can be triggered outside from the angular zone
    // we need to re-enter the angular zone to ensure the components are still interactive
    this.ngZone.run(() => {
      this.outletRef.clear()
      this.outletRef.createEmbeddedView(this.template)
    })
  }
}

这就是在装饰器中使用组件的方式:

export const withSiteSwitch = (story: any, context: any) => {
  const site = context.globals.site
  const { moduleMetadata = {}, template = '', props = {}, ...rest } = story()
  const { declarations = [] } = moduleMetadata
  moduleMetadata.declarations = [...declarations, ForceRenderingComponent]
  document.documentElement.setAttribute('site', site)
  ForceRenderingComponent.render$.next() // triggers re-initialization
  return {
    ...rest,
    moduleMetadata,
    props: { ...props, site },
    template: `<sb-force-rendering><ng-template>${template}</ng-template></sb-force-rendering>`,
  }
}