В прошлой статье я провел краткое введение в возможности Storybook, теперь я продемонстрирую некоторые продвинутые концепции, которые вы будете использовать в реальном проекте.

Внедрение зависимостей

moduleMetadata — отличная функция в Storybook, с ее помощью мы можем добавлять сервисы и модули, необходимые для рендеринга историй.

Это принцип, который мы используем в TestBed для тестирования компонента. Просто введите строго необходимые зависимости. Так что можно вводить настоящий сервис и фейк.

У нас есть немного информации:

  • app-foobar,из приложения;
  • mat-icon из материала;
  • FoobarService;
  • ComplexService, над которым мы будем издеваться;

Мы внедрили зависимости, необходимые для рендеринга компонента:

  • Imports -> MatIconModule для удовлетворения зависимости от мат-значка;
  • Объявления -> SomeComponent и FoobarComponent для рендеринга app-some;
  • Обеспечивает -› FoobarService и поддельный ComplexService;

Захват выходных событий компонента

Последнее, что делает нашу историю реальной в реальном проекте, — это захват событий из компонентов.

По тому же принципу, что и Input, мы отправляем компоненту события, которые мы можем получать из Output.

По умолчанию мы установили несколько дополнений для сборника рассказов, вы можете проверить их в демонстрационных историях. Здесь у нас есть Заметки, Ссылки и потрясающееДействие!

Действие позволяет нам получать события из определенного компонента Выходные данные и распечатывать их на вкладке «Журнал действий».

Компонент Button имеет вывод, называемый onClick, и генерирует событие. Это событие фиксируется, и его значение регистрируется на вкладке Журнал действий.

Этот экран сборника рассказов может показаться вам странным. Он уже подпитывается несколькими надстройками, которые помогают нам повысить производительность и организовать компоненты нашего выставочного зала.

Демонстрационная картинка действия взята из проекта, который я сделал, чтобы продемонстрировать некоторые функции сборника рассказов. Там помимо демонстрации работы можно проверить, как они настроены. Вы можете увидеть это на моем Github!

Если вы не читали первую статью, это очень важно, так как я объясняю некоторые понятия и рассказываю о настройке и установке.