Я написал это на @angular-redux/store
и мне было интересно, если решение уже существует.
https://github.com/angular-redux/store/issues/551
Вот резюме, чтобы спасти вас от чтения ссылки:
Использование Angular и Storybook до сих пор хорошо работало.Однако у меня есть случаи, когда мой компонент зависит от @select ().Как я могу сказать компоненту в моей истории, чтобы он использовал фиктивную наблюдаемую точку или точку данных?
Вот мой пример кода:
import { storiesOf, moduleMetadata } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// Modules
... custom modules ...
// Components
...myAppComponents...
import { MyParticularComponent as component } from './my-particular.component';
// Mock Data
... mock json data...
const props = { ...mockData... };
storiesOf('This Particular Component', module)
.addDecorator(
moduleMetadata({
declarations: [component, ...other components...],
imports: [
CommonModule,
BrowserAnimationsModule,
...custom modules...
],
schemas: [],
providers: []
})
)
.add('Some View of the Component', () => ({
component,
props
}));
И мой компонент имеет:
@Input()
someInput: string;
@select()
stateValue$: Observable<SomeData>;
propOne;
propTwo;
ngOnInit() {
this.stateValue$.subscribe(data => {
const { propOne, propTwo } = data;
this.propOne = propOne;
this.propTwo = propTwo;
});
}