Question

我目前正在使用Storybook和Angular。我似乎无法在我的组件之一中更改Observable的值。故事书上什么都没有显示。

我试图做of（true）来更改值，但是即使没有它也似乎不起作用。尝试检查元素，但是没有任何东西，因此我认为它没有做任何事情。

我的故事：

stories.add('Loader', () => {
  return {
    template: `
      <rpg-loader>
      </rpg-loader>
    `,
    props: {
      isLoading$: boolean('isLoading$', of(true))
    }
  };
});

我的组件：

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'rpg-loader',
  templateUrl: './loader.html',
  styleUrls: ['./loader.scss']
})
export class LoaderComponent implements OnInit {
  isLoading$: Observable<boolean>;

  constructor(
    private loadingProvider: LoadingProvider
  ) { }

  ngOnInit() {
    this.isLoading$ = this.loadingProvider.getLoadingState();
  }
}

我希望故事书能向我展示实际的组件，并且可以在一个旋钮内切换它，但是什么也没有。

Answer 1

嘿，我遇到了同样的问题，这就是我想到的。您可以利用Angular中的setter使其工作。抱歉，回复太晚了。我只需要自己用谷歌搜索答案就可以到达这里。然后发现没有答案！真是一场噩梦。欢呼。

故事HTML

[SomeObservable$] = "_VARIABLE_NAME$"

故事组件

  _VARIABLE_NAME$: BehaviorSubject<WHATEVER_TYPE>;


  @Input()
  set VARIABLE_NAME(value: boolean) {
    this._VARIABLE_NAME$ = new BehaviorSubject(value);
  }

故事书旋钮（不必为布尔值，您可以将其更改为设置值将进入设置器并作为可观察值发送的任何值。）

    SOME_VARIABLE_NAME: boolean('SOME_VARIABLE_NAME?', false),

用旋钮改变观测值

1 个答案: