Angular 5中的Typescript继承

Question

我试图用另一个类扩展一些组件，但我得到了

[Angular]无法在'pathtomyproject'/ src / app / my-projects / my-projects.component.ts中解析MyProjectsComponent的所有参数：（[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