Angular2-共享组件控制器

Question

我有两个使用相同方法的页面组件，除了使用两个不同的类型类。 这两个组件称为服务和用户。 除了显示的类属性信息外，这两个组件都使用非常相似的模板。 在两个控制器上重复方法似乎效率不高，有没有办法组合/共享控制器。

服务

import { Component } from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common'; 
const template = require('./service.component.html');
const style = require('./service.component.css'); 

interface Service {
    id: number;
    name: string;
    summary: string;
    path: string; 
}; 

@Component({
  selector: 'admin-services',
  directives: [ CORE_DIRECTIVES],
  template: template,
  styles: [ style ]
})

export class ServiceComponent {
  services = Services; 
  selectedService:Service ; 
  constructor() {
  }

  onselect(service:Service){
    this.selectedService = service ; 
  }
  onEdit(service:Service){
    console.log("Edit: "+service); 
  }
  onDelete(service:Service){
      console.log("Delete: "+service);
  }
  onView(service:Service){
    console.log("View: "+service); 
  }
  onAdd(){
    this.selectedService = <Service>{}; 
  }
}

用户名

import { Component } from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common'; 
const template = require('./users.component.html');
const style = require('./users.component.css'); 

interface User {
    id: number;
    image: string;
    name: string;
    email: string;
    role: string; 
}; 

@Component({
  selector: 'admin-users',
  directives: [ CORE_DIRECTIVES],
  template: template,
  styles: [ style ]
})

export class UsersComponent {
  users = Users; 
  selectedUser:User ; 
  constructor() {
  }

  onselect(user:User){
    this.selectedUser = user ; 
  }
  onEdit(user:User){
    console.log("Edit: "+user); 
  }
  onDelete(user:User){
      console.log("Delete: "+user);
  }
  onView(user:User){
    console.log("View: "+user); 
  }
  onAdd(){
    this.selectedUser = <User>{}; 
  }
}

Answer 1

是的，这是Angular的组件驱动设计和Typescripts的类驱动设计真正发挥作用的地方：

在定义了ServicesComponent你有以上，你可以简单地继承了该类和不同的组件元数据附加到它：

@Component({
  selector: 'admin-users',
  directives: [ CORE_DIRECTIVES],
  template: template,
  styles: [ style ]
})
export class UsersComponent extends ServicesComponent { 
    constructor(){
      super();
    } 

    //override whatever methods/fields in the parent class you need to (and only those)


} 

Answer 2

我相信您可以使用一组方法创建服务并传递一个对象。 然后将对象转换为所需的类并在方法中使用它。