Чтобы использовать сервис Angular внутри Storybook, вы можете выполнить следующие действия:
-
Создание службы Angular. Начните с создания службы в проекте Angular. Сервисы в Angular обычно создаются с помощью команды Angular CLI
nggenerateserviceserviceName. -
Импортируйте сервис в свой компонент Storybook. В файле компонента Storybook вы можете импортировать сервис Angular с помощью стандартного оператора импорта, например
import { YourServiceName } from '../path/to/your -сервис';. -
Добавьте службу в модуль Storybook. В файле модуля Storybook (обычно с именем
YourComponentName.stories.ts) импортируйте службу Angular и добавьте ее вproviders<. /code>массив метаданных модуля. Это сделает сервис доступным для вашего компонента Storybook. -
Используйте сервис в своем компоненте Storybook: теперь вы можете внедрить сервис Angular в конструктор вашего компонента Storybook или в любой другой метод, где вам нужно его использовать. Система внедрения зависимостей Angular создаст экземпляр службы и предоставит его вашему компоненту.
Вот пример того, как может выглядеть код:
// your-service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class YourServiceName {
// Service code goes here
}
// your-component.stories.ts
import { YourServiceName } from '../path/to/your-service';
export default {
title: 'Your Component',
// ...
providers: [YourServiceName],
};
export const YourComponent = () => {
// Use the service here
// ...
};