Angular 5 中的 Typescript 继承

Question

我正在尝试用另一个 class 扩展一些组件，但我得到了

[Angular] Can't resolve all parameters for MyProjectsComponent in 'pathtomyproject'/src/app/my-projects/my-projects.component.ts: ([object Object], ?).

security.ts

import { Router} from '@angular/router';

export abstract class Security {

  constructor(
    protected router: Router
   ) { }

  isLogged() {
    if (!sessionStorage.getItem('user')) {
      this.router.navigate(['/login']);
    }
  }
}

我的-projects.component

import { Component, OnInit } from '@angular/core';
import { RouterModule, Router, ActivatedRoute } from '@angular/router';

import { ProjectService } from './project.service';
import { Security } from '../security';

@Component({
  selector: 'app-my-projects',
  templateUrl: './my-projects.component.html',
  styleUrls: ['./my-projects.component.scss'],
  providers: [ProjectService],
})
export class MyProjectsComponent extends Security implements OnInit {

  projects: Array<any>;

  constructor(
    private projectService: ProjectService,
    protected router
  ) {
      super(router);
    }

  ngOnInit() {
    this.getProjects();
  }

  async getProjects() {
    const data: any = await this.projectService.getAll();
    this.projects = data._embedded.projects;
  }

  delete(id) {
    this.projectService.delete(id);
    this.getProjects();
  }

  edit(id) {
    const path = `/edit/${id}`;
    this.router.navigate([path]);
  }

}

Answer 1

MyProjectsComponent 的构造函数中可能存在一些问题。您错误配置了路由器的依赖注入。将其更改为：

constructor(
  private projectService: ProjectService,
  protected router: Router // <-- DI for Router
) {
  super(router);
}

然后它应该可以工作了。

我试图在这个 stackblitz 中重现你的问题：

https://stackblitz.com/edit/angular-aifdew

Angular 5 中的 Typescript 继承

Typescript inheritance in Angular 5

javascript

inheritance

typescript

angular

angular5