如何使用扩展用于此 angulr2 方案

Question

在我的应用程序中，核心组件是根组件，在此页眉中，存在侧菜单设计，

侧菜单

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

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

我的组件是

核心组件

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) {
    }
}

侧边菜单组件

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

看来您可能缺少侧边菜单组件上的@Component装饰器。

这是一个带有简单扩展组件的 Plunker，这里有一篇很好的文章：组件惯性。

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);
  }
}