Angular -字体+ FaIconLibrary +Angular+ Storybook.js = :(

Question

我只是想使用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)中，我看不到向构造函数添加任何东西的方法，因为它不在那里。有没有人解决了这个问题，或者有很好的解决办法？谢谢

Answer 1

一种选择是在加载storybook时使用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;
}

在这个组件的故事书中，您可以在moduleMetadata调用中提供一个APP_INITIALIZER。此代码将在加载storybook时执行，并将配置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上找到。