Angular提供者在擴展組件中丟失

我需要一個基礎組件，我的其他組件可以從中擴展。父組件具有從同一服務擴展的所有不同服務，我想將此服務傳遞給 Base 組件，以便它可以完成作業。

現在我正在從我的父組件擴展基本組件，然后嘗試通過我在父組件和父組件模塊中提供的注入器令牌加載服務（我只是嘗試兩者，因為它不起作用）。

但我得到一個：

    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，所以 BaseDataEntryFormComponent 應該具有相同的提供程式，但似乎并非如此。

非常感謝任何幫助

uj5u.com熱心網友回復：

您可以在呼叫 super 時將令牌實體從 RecordingDataEntryFormComponent 傳遞給 BaseDataEntryFormComponent。加上 BaseDataEntryFormComponent 不應該是一個組件。應該是普通班。一個組件不應該擴展另一個組件，因為它不會帶來好處。您可以將 @Directive() 放在上面以使用 @Input @Output 型別的裝飾器。

uj5u.com熱心網友回復：

我通過不再使用我的 ServiceLocator 來解決它，而是在 RecordingDataEntryFormComponent 本地注入“Injector”，然后將其傳遞給 BaseDataEntryFormComponent。

標籤：

上一篇：同一實體下的類繼承

下一篇：ValueError：在系統中找不到外部ID：website.assets_frontend