如何在这个 angulr2 场景中使用扩展？

Question

在我的应用程序中核心组件是根组件，在这个页眉中，存在sidemenu设计，

SideMenu是动态的，所以我在其他sidemenu组件中编写代码的逻辑，

现在我想在核心组件中使用sidemenu的功能，我认为是 通过使用扩展来完成，

我的组件是

核心组件

import { Component, OnInit } from '@angular/core';
import {SidemenuComponent} from './sidemenu.component';

@Component({
  selector: 'my-admin',
  templateUrl: '../views/admin-header.html'
})

export class CoreComponent extends SidemenuComponent {

  constructor( private router: Router) {
    }

}

sidemenucomponent

import {OnInit } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';
import {MenuService} from './core.service';

export class SidemenuComponent implements OnInit{
  userroleId : any;
  roleName: string;
  menuItems:any;
  constructor(private http: Http,private MenuService:MenuService) {
   this.userroleId =  localStorage.getItem("roleId")
  }

  ngOnInit(): void {
    this.getSideMenu();
  }

  getSideMenu () {
    if( this.userroleId == 1) {
      this.MenuService.getAdminMenu().subscribe(menuItems => this.menuItems= menuItems, error => console.log(error));
    }

    if(this.userroleId == 2){
      this.MenuService.getpractitionerMenu().subscribe(menuItems => this.menuItems= menuItems, error => console.log(error));
      console.log('ss')
    }
  }
}

菜单服务

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';

@Injectable()

export class MenuService {
  constructor(private http: Http) {}

  public getAdminMenu(): Observable<any> {
    return this.http.get("./app/core/adminsidemenu.json")
      .map((res:any) => res.json())
      .catch(this.handleError);
  }
  public getpractitionerMenu(): Observable<any> {
    return this.http.get("./app/core/practitioner.json")
      .map((res:any) => res.json())
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }

}

这里我无法在核心组件中扩展侧边菜单组件。 我的控制台出现错误：

派生类的构造函数必须包含“超级”调用。

请帮帮我

Answer 1

看来您可能缺少 SidemenuComponent 上的 @Component 装饰器。

这是一个带有simple extended Component 的 Plunker，还有一篇关于它的好文章：Component Ineritance。

Answer 2

你需要在你的子类中调用父类的构造函数：

@Component({
  selector: 'my-admin',
  templateUrl: '../views/admin-header.html'
})

export class CoreComponent extends SidemenuComponent {

  constructor( private router: Router, http: Http, menuService:MenuService) {
     super(http,menuService);
  }

}