我正在将故事书添加到现有应用程序中。除了一些现在已经过去的痛苦问题之外,它基本上是成功的,但是我遇到了一个新问题。我有多个从抽象基类扩展的组件,它们抱怨它们无法解析参数。例如:Error: Can't resolve all parameters for MyComponent: (?, ?, ?, ?, ?, ?, ?)
这个组件没有构造函数,但它扩展的基类有,并且有 7 个参数匹配 7 个问号。我已经为 storybook 提供了使用 through 的类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(),怎么办?