使用超類擴展的組件需要幫助進行測驗

這是我的基類：

export class DetailsComponent
extends AddClinicComponent
implements OnInit, AfterViewInit{}

在規范中，DetailsComponent.spec我正在嘗試撰寫一個測驗，它在AddClinicComponent組件中。

這是測驗：

fit('it should open popup  on click of button add clinic button ', async(() => {
    spyOn(component, 'openDialog');
    fixture.detectChanges();
    const removeButton =
        fixture.debugElement.nativeElement.querySelector('.hfs-add-btn');
    expect(removeButton).toBeTruthy();
    let event = new MouseEvent('click');
    removeButton.dispatchEvent(event);
    fixture.whenStable().then(() => {
        expect(component.openDialog).toHaveBeenCalled();
    });
}));

但是出現錯誤：

Error: Directive AddClinicComponent has no selector, please add it!如何解決？測驗擴展組件的正確方法是什么？

我的超級班：

import { TemplateRef, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { AddClinicDataService } from '../services/personnel-add-clinic-data.service';
import { HFSClinicTaleSchema } from './hfs-clinic-table.schema';
export abstract class AddClinicComponent {
    popTableSchema;
    clinicTaleSchema;
    @ViewChild('popupTemp', { static: true })
    popupTemp: TemplateRef<HTMLAllCollection>;
    public primaryName = '';
    public primaryAdminId = '';
    public dialog: MatDialog;

    constructor(protected aAddClinicDataService: AddClinicDataService) {
        this.clinicTaleSchema = HFSClinicTaleSchema;
    }

    clinicRowGenerator(rows) {
        return rows.map((p) => {
            return {
                ...p,
                address: Object.values(p.address).filter((v) => v != null),
                transform: true,
            };
        });
    }

    handleAddClinic() {
        this.popTableSchema = { ...HFSClinicTaleSchema, rows: [] };
        this.openDialog(this.popupTemp);
    }
    openDialog(templateRef: TemplateRef<HTMLAllCollection>) {
        const dialogRef = this.dialog.open(templateRef);
        dialogRef.afterClosed().subscribe((result) => {
            console.log(`Dialog result: ${result}`);
        });
    }

    addClinics() {
        const { rows } = this.popTableSchema;
        const transform = [...rows]
            .filter((r) => r.checked)
            .map((item) => ({ ...item, checked: false }));
        if (!transform.length) return;
        this.rowTransformer(transform);
        this.dialog.closeAll();
    }

    searchClinics($event: Event): void {
        $event.preventDefault();
        const formDetails = this.postProfile();
        const countryCodes = formDetails.countries.map((v) => v.codeId);
        const searchParams = {
            primaryAdminId: this.primaryAdminId,
            primaryName: this.primaryName,
            countryCodes: countryCodes.join(','),
        };
        this.fetchClinicList(
            `name=${this.primaryName}&adminUserName=${
                this.primaryAdminId
            }&countryCds=${countryCodes.join(',')}`
        );
        this.primaryAdminId = '';
        this.primaryName = '';
    }
    fetchClinicList(searchParams) {
        this.aAddClinicDataService
            .getClinicsList(searchParams)
            .subscribe((data) => {
                const nwRows = data?.map((d) => {
                    return {
                        ...d,
                        address: Object.values(d.address).filter(
                            (v) => v !== null
                        ),
                    };
                });
                this.popTableSchema = { ...this.popTableSchema, rows: nwRows };
            });
    }
    protected abstract rowTransformer(value);
    abstract postProfile();
}

嘗試后：我收到此錯誤：

 Error: This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.
        This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.

        Please check that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.

細節組件的建構式：

constructor(
        private personnelViewDataService: PersonnelViewDataService,
        private personnelTranslateService: PersonnelTranslateService,
        private cdr: ChangeDetectorRef,
        public dialog: MatDialog,
        protected aAddClinicDataService: AddClinicDataService
    ) {
        super();
    }

的建構式AddClinicComponent

 constructor(protected aAddClinicDataService: AddClinicDataService) {
        this.clinicTaleSchema = HFSClinicTaleSchema;
    }

uj5u.com熱心網友回復：

依賴注入僅在類具有 Angular 裝飾器時才有效。

DI 連接到 Angular 框架中，并允許帶有 Angular 裝飾器的類（例如組件、指令、管道和可注入物件）配置它們需要的依賴項。

https://angular.io/guide/dependency-injection

這可能是導致錯誤的原因，嘗試在組件類中注入服務，并在呼叫 super 時將服務傳遞給擴展類

細節組件的建構式：

constructor(
  private personnelViewDataService: PersonnelViewDataService,
  private personnelTranslateService: PersonnelTranslateService,
  private cdr: ChangeDetectorRef,
  public dialog: MatDialog,
  public aAddClinicDataService: AddClinicDataService
) {
  super(aAddClinicDataService);
}

標籤：有角度的角度测试

上一篇：如何在不向子組件本身添加樣式的情況下以角度設定子組件的樣式？

下一篇：RXJS管道過濾器內部（嵌套）屬性資料