使用旋钮更改 observable 的值

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),