问题描述
我有一个模态的Angular组件,以便模态的内容可以像这样传递:
SomeComponent.html:
<my-modal-component>
<div> all my content for the modal of SomeComponent goes here!</div>
</my-modal-component>
my-modal-component
负责设置模式样式,关闭按钮等。
要为我的所有模态和使用这些模态的组件扩展一些选项,我创建了一个名为my-abstract-component
的抽象类,该抽象类实际上不是组件,而是一个类具有与每个组件相似的设置和功能(错误处理,设置/拆卸等)
我的问题是我无法从SomeComponent
获得所需的非服务信息作为进入MyAbstractComponent
的模式。
SomeComponent.ts,具有将包含在模态中的所有内容的组件。
@Component({ ... })
export class SomeComponent extends MyModalComponent{
public constructor(
@Inject(LoggerService) logger: LoggerService,// these services are injected as normal
@Inject(NgbActiveModal) activeModal: NgbActiveModal,) {
super(activeModal,logger,Components.MyModalComponent);
}
...
}
MyModalComponent.ts,既包含内容又具有自己内容的模式组件。它包含一些共享的模态功能,例如关闭模态。因为它也是一个组件,所以它扩展了MyAbstractComponent。
@Component({...}) // this is a real component with a view and module,so it's tagged as such
export class MyModalComponent extends MyAbstractComponent{
public constructor(
protected activeModal: NgbActiveModal,protected logger: LoggerService,component: IComponent,// THIS IS MY PROBLEM
) {
super(logger,component);
}
...
}
MyModalModule.ts
@NgModule({
declarations: [ MyModalComponent],imports: [
CommonModule,NgbModule
],providers: [
LoggerService
// is it possible to somehow put the IComponent here?
],exports: [ MyModalComponent,],entryComponents: [ MyModalComponent,]
})
export class MyModalModule{ }
MyAbstractComponent.ts,所有组件的抽象组件,包括常见功能,例如记录错误,设置,拆卸等。
/* Acts like a component,but is not flagged as a real component because it doesn't have a view or module*/
export abstract class MyAbstractComponent implements OnInit,OnDestroy {
public constructor(
protected logger: LoggerService,protected component: IComponent,// content passed in the constructor because it's not real dependency injection of services
) {
this.logger= logger;
this.component = component;
}
...
}
我要传递的信息是用于记录的信息,这里是Components.MyModalComponent
的示例:
export namespace Components {
export const MyModalComponent: IComponent = {
userFriendlyName: "My Modal Component",...
};
}
如您所见,我需要从顶层组件类(SomeComponent
)向下获取多个组件信息到MyAbstractComponent`中。如果只需要经过一个级别,则可以通过超级构造函数传递组件信息。但是,由于此组件信息需要经过组件的第二层,其中只有服务才能成为该组件中注入的一部分,所以我收到有关DI的错误消息:
ERROR in Can't resolve all parameters for MyModalComponent in MyModalComponent.ts: ([object Object],[object Object],?).
?
是不是服务的组件信息。
我可以通过不同的方式(通过@Input
或使用getter / setter传递所需的信息),但在理想情况下,构造函数中的所有内容都已准备就绪。我有信心其他人之前已经解决过这个问题。有什么想法吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)