故事书Angular无法解析基类上的参数

时间:2020-06-22 08:35:27

标签: angular storybook angular-storybook

我正在将故事书添加到现有应用中。除了我现在遇到的一些痛苦的问题之外,这基本上是成功的,但是我遇到了一个新问题。 我有多个从抽象基类扩展的组件,它们抱怨它们无法解析参数。 EG:Error: Can't resolve all parameters for MyComponent: (?, ?, ?, ?, ?, ?, ?)

此组件没有构造函数,但是它扩展的基类具有构造函数,并且具有与7个问号匹配的7个参数。 我通过moduleMetadata提供了供故事书使用的类,该类可用于具有自己构造函数的其他组件,但不适用于这些组件。

如果我有一个伪造的构造函数将参数传递给super(),那么它可以工作,但是我不想为所有此类组件添加这个毫无意义的构造函数。

下面是一个非常剥离的代码示例。

故事文件:

export default {
  title: 'My Stories',
  component: MyComponent,
  decorators: [
    withKnobs,
    moduleMetadata({
      imports: [
        // Import some modules needed here
      ],
      providers: [
        // I pass in all my services here, these are the 7 params needed for the component's base class
      ],
      declarations: [
        // Required child components are here
      ],
    }),
  ],
};

export const ComponentStory = () => ({
  component: MyComponent,
  props: {},
});

组件文件:

@Component({
  selector: 'app-my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
})
export class MyComponent extends BaseComponent {
  //Implementation here - No constructor
}

基本组件文件:

export abstract class BaseComponent implements OnInit, OnDestroy {
  constructor(
    protected firstService: FirstService,
    protected router: Router,
    protected ngProgress: NgProgress,
    protected secondService: SecondService,
    protected thirdService: ThirdService,
    protected forthService: ForthService,
    public fifthService: FifthService
  ) {
    // Some other code here
  }

  // Implementation...
}

使用上面的代码,我得到关于未解析参数的错误。 但是,如果我将以下内容添加到组件文件中,则它可以正常工作,并按预期将组件安装到故事书中:

  constructor(
    protected firstService: FirstService,
    protected router: Router,
    protected ngProgress: NgProgress,
    protected secondService: SecondService,
    protected thirdService: ThirdService,
    protected forthService: ForthService,
    public fifthService: FifthService
  ) {
    super(
      firstService,
      router,
      ngProgress,
      secondService,
      thirdService,
      forthService,
      fifthService
    );
  }

但是,正如您可以想像的那样,我不想为讲故事书的所有这些没有基本构造函数而扩展了该基类的组件添加无意义的构造函数。

有人可以建议我可以尝试的其他方法,或者我可能缺少的方法吗? 非常感谢。

tl:dr 除非我向组件添加构造函数并将这些值传递给super(),否则故事书中的组件无法解析抽象基类的参数。

0 个答案:

没有答案
相关问题