angular-fontawesome + FaIconLibrary + Angular + Storybook.js = :( - PullRequest
Новая
       67

angular-fontawesome + FaIconLibrary + Angular + Storybook.js = :(

0 голосов
/ 01 октября 2019

Просто хотелось бы использовать angular-fontawesome с Storybook.js в качестве библиотеки (FaIconLibrary). В следующей документации https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/icon-library.md#using-the-icon-library я добавлю свойство в конструктор. Только в файле Storybook.js (index.stories.ts) я не вижу способа добавить что-либо в конструктор, потому что его там нет. Кто-нибудь разрешает это или хорошо обходится? Спасибо

1 Ответ

0 голосов
/ 02 ноября 2019

Один из вариантов - использовать функцию Angular APP_INITIALIZER для выполнения произвольного кода при загрузке сборника рассказов. В этом конкретном случае вы можете настроить FaIconLibrary с необходимыми значками во время инициализации приложения.

Предположим, у вас есть следующий компонент, который использует fa-icon, и вы хотите использовать его внутри сборника рассказов: 

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-user-detail',
  template: `
    <h1>
      <fa-icon icon="user"></fa-icon>
      {{ fullName }}
    </h1>
    <p>Full name: {{ fullName }}</p>
  `,
})
export class UserDetailComponent {
  @Input()
  fullName: string;
}

В книге рассказов для этого компонента вы можете указать APP_INITIALIZER в вызове moduleMetadata. Этот код будет выполнен при загрузке сборника рассказов и настроит FaIconLibrary: 

import { APP_INITIALIZER } from '@angular/core';
import { FaIconLibrary, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faUser } from '@fortawesome/free-solid-svg-icons';
import { moduleMetadata, storiesOf } from '@storybook/angular';
import { UserDetailComponent } from '../app/user-detail.component';

storiesOf('User Detail', module)
  .addDecorator(
    moduleMetadata({
      imports: [ FontAwesomeModule ],
      declarations: [ UserDetailComponent ],
      // The key bit is the providers array below.
      providers: [
        {
          provide: APP_INITIALIZER,
          useFactory: (iconLibrary: FaIconLibrary) => {
            return async () => {
              // Add the necessary icons inside the initialiser body.
              iconLibrary.addIcons(faUser);
            };
          },
          // When using a factory provider you need to explicitly specify its 
          // dependencies.
          deps: [ FaIconLibrary ],
          multi: true,
        },
      ],
    }),
  )
  .add('default', () => {
    return {
      template: `<app-user-detail [fullName]="fullName"></app-user-detail>`,
      props: {
        fullName: 'John Doe',
      },
    };
  });

Полный код также можно найти на GitHub .

...