我需要一个基本组件，我的其他组件可以从中扩展。Parent组件具有从同一服务扩展的所有不同服务，我想将这些服务传递给Base组件，这样它就可以完成自己的工作。
现在，我正在从Parent组件扩展基本组件，然后尝试通过在Parent组件和Parent组件模块中提供的注入器令牌加载服务(我只是检索两者，因为它不起作用(。
但我得到了一个：
ERROR NullInjectorError: R3InjectorError(fe)[InjectionToken ENTITYLISTSERVICEPROVIDER -> InjectionToken ENTITYLISTSERVICEPROVIDER -> InjectionToken ENTITYLISTSERVICEPROVIDER]:
NullInjectorError: No provider for InjectionToken ENTITYLISTSERVICEPROVIDER!
每次都不知道该怎么办。
我的父组件如下所示：
@Component({
selector: 'app-recording-data-entry-form',
templateUrl: './recording-data-entry-form.component.html',
styleUrls: ['./recording-data-entry-form.component.scss'],
providers: [
{ provide: ENTITYLISTSERVICE_PROVIDER, useClass: RecordingsService },
{ provide: ENTITYENDPOINT_PROVIDER, useValue: 'apiEndpoints.RECORDING' },
{ provide: ENTITY_FORM_PATH, useValue: 'RecodingDataEntryFormState.recording' }
]
})
export class RecordingDataEntryFormComponent extends BaseDataEntryFormComponent<
RecordingsListModel.RecordingModel,
RecordingDetailModel.RecordingModel> {
form: FormGroup;
@ViewChild('subject_id') subjectIdAutoComplete!: MatAutocompleteTrigger;
public autoCompletes;
id: number | undefined;
@Select(RecodingDataEntryFormState.getApiData) apiData$!: Observable<any>;
constructor() {
const form = new FormGroup({
name: new FormControl({}, [Validators.required]),
quality_comment: new FormControl({}),
subject_id: new FormControl({}, [Validators.required]),
recording_session_id: new FormControl({}, [Validators.required])
});
super(form);
this.form = form;
this.autoCompletes = this.subjectIdAutoComplete;
}
我的应用程序模块：
//...
declarations: [AppComponent, BaseDataEntryFormComponent],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: FakeBackend, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: HttpCredentialsInterceptor, multi: true },
{ provide: 'SnotifyToastConfig', useValue: notificationConfig },
{ provide: LOCALE_ID, useValue: 'de-DE' },
SnotifyService
],
bootstrap: [AppComponent]
//...
export class AppModule {
constructor(private injector: Injector) {
ServiceLocator.injector = this.injector;
}
}
//...
基础组件：
@Component({
selector: 'app-base-data-entry-form-component',
template: '',
styles: []
})
export class BaseDataEntryFormComponent<L extends DatatableData, D> {
public options: { [key: string]: any[] } = {};
id: number | undefined;
private readonly dataEntryService: DataEntryService;
private baseService: BaseService;
private store: Store;
private router: Router;
private baseDetailsPageService: BaseDetailsPageService<RecordingDetailModel.RecordingModel>;
private basePageService: BasePageService<L>;
private formPath: string;
private activeEndpoint: string = '';
@SelectSnapshot(RecodingDataEntryFormState.formState) formState!: 'edit' | 'create';
@SelectSnapshot(RecodingDataEntryFormState.dirty) isDirty!: boolean;
public constructor(protected form: FormGroup) {
this.baseService = ServiceLocator.injector.get(BaseService);
this.store = ServiceLocator.injector.get(Store);
this.router = ServiceLocator.injector.get(Router);
this.baseDetailsPageService = ServiceLocator.injector.get(RecordingDetailsService);
this.basePageService = ServiceLocator.injector.get<BasePageService<L>>(ENTITYLISTSERVICE_PROVIDER);
this.formPath = ServiceLocator.injector.get<string>(ENTITY_FORM_PATH);
this.activeEndpoint = ServiceLocator.injector.get<string>(ENTITYENDPOINT_PROVIDER);
const formState = this.dataEntryService.getFormState();
this.store.dispatch(new RecordingFormActions.UpdateFormState(formState));
this.makeApiCall(this.dataEntryService);
我认为因为RecordingDataEntryFormComponent扩展了BaseDataEntryFormComponent，所以BaseDataEntryGormComponent应该有相同的提供者，但事实并非如此
非常感谢任何帮助
您可以在调用super时将令牌的实例从RecordingDataEntryFormComponent传递给BaseDataEntryFormComponent。Plus BaseDataEntryFormComponent不应该是组件。它应该是一个正常的类。一个组件不应该扩展另一个组件，因为它不会带来好处。您可以将@Directive((放在上面以使用@Input@Output类型装饰器。
我解决了这个问题，不再使用我的ServiceLocator，而是注入"注射器"；本地的RecordingDataEntryFormComponent，然后将其传递给BaseDataEntryFormComponent。