angular - 使用 Abstract 在 Typescript 中创建基础组件

Question

我正在尝试使用列表页面中使用的一些默认方法创建一个基本组件，所以这是我的 ts 文件:

export abstract class BaselistComponent<T> implements OnInit {
  source: LocalDataSource = new LocalDataSource();

  constructor(private service: BasecrudService<T>,
              private notification: NotificationService) {
  }

   ngOnInit(): void {
    this.service.findRecords().subscribe((data: T[]) => {
      this.source.load(data);
    });
  }
}

现在我有了使用这个基础的组件:

@Component({
  selector: 'ngx-unidade',
  templateUrl: './unidade.component.html',
  styleUrls: ['./unidade.component.scss'],
})
export class UnidadeComponent extends BaselistComponent<Unidade> {

   constructor(service: UnidadeService, notification: NotificationService) {
    super(service, notification);
  }
}

当我尝试执行我的应用程序时，我得到了 Cannot read property 'findRecords' of undefined 我知道这个错误发生是因为 this.service 是未定义的，但我不知道知道为什么，我已经声明了。

这是我的服务基地:

export abstract class BasecrudService<T> {

  constructor(private http: HttpClient, private adapter: Adapter<T>) {
  }

  abstract getPrefixURL(): string;

  findRecords(): Observable<T[]> {
    return this.http.get(`${environment.apiUrl}/${this.getPrefixURL()}/pagina/0`).pipe(
      map((data: any) => data.registros.map(item => this.adapter.adapt(item))),
    );
  }
}

和服务实现:

@Injectable({
  providedIn: 'root',
})
export class UnidadeService extends BasecrudService<Unidade> {

  constructor(http: HttpClient, adapter: Adapter<Unidade>) {
    super(http, adapter);
  }

  getPrefixURL(): string {
    return 'unidades';
  }

}

编辑 1

这是我的console.log(this)，注意我的service是未定义的

编辑 2这是我的项目完整来源:https://github.com/rlanhellas/safepark-front

Answer 1

你的错误原因是你在 Angular DI 中使用了接口(interface)。

unidate.service.ts

export class UnidadeService extends BasecrudService<Unidade> {

  constructor(http: HttpClient, adapter: Adapter<Unidade>) {
                                         ^^^^^^^
    super(http, adapter);
  }
}

这会导致 DI 错误，因此您不会初始化 UnidadeService