Я работаю над проектом Storybook, в котором у меня есть компонент (ToastersComponent), используемый только для целей Storybook, и я хочу использовать в нем службу Angular (ToasterService). Служба имеет зависимости, внедренные через ее конструктор (например, Overlay, BreakpointObserver).
Проблема в том, что компонент используется исключительно для Storybook, и я предпочитаю хранить его в файле истории, не создавая отдельный файл компонента.
Вот упрощенная версия соответствующего кода:
// ... (imports)
export const Toaster: Story<ToastersComponent> => {
...,
render(args) => ({
props: {
...args,
generateToaster: ()=> {
alert("Generate Toaster !")
// need to call toasterService.show()
}
},
template: `
<div>
<button (click) = "generateToaster()"> Show Toaster</button>
</div>
`,
});
Как я могу правильно вставить ToasterService в историю Storybook, учитывая, что он используется только для Storybook, и я бы не хотел создавать отдельный файл компонента?
🤔 А знаете ли вы, что...
Angular обеспечивает высокую производительность благодаря использованию виртуального DOM.
Самый простой и понятный способ — создать специальный компонент, который сможет внедрить наш сервис (как пример:)
// ... (imports)
@Component({ // an inner-component for more readable story
selector: 'toasters-component',
template: ` <button (click) = "showToaster()"> Show Toaster</c-button> `,
})
export class ToastersTestComponent {
@Input() message: string = ''
@Input() status: string = 'success'
...
constructor(private toasterService: MyToasterService) {}
showToaster() {
this.toasterService.show(this.message, this.status ... })
}
}
...
export const Toaster: Story<ToastersTestComponent> => {
...,
render(args) => ({
props: {
...args,
},
template: `
<div>
<toasters-component [message] = "message" .. > </toasters-component>
</div>
`,
});