Question

在我的应用程序中，核心组件是根组件，在此页面标题中，存在sidemenu设计，

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

现在我想在核心组件中使用sidemenu的功能，我认为是通过使用extends，

完成

我的组件是

核心组件

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

MenuService

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

}

这里我无法扩展核心组件中的sidemenu组件。我在控制台中收到错误：

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

请帮帮我

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

}

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

2 个答案: