Angular2 - 共享组件控制器答案

【问题标题】：Angular2 - Share component controllersAngular2 - 共享组件控制器
【发布时间】：2016-08-21 18:17:56
【问题描述】：

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

Services.ts

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

用户.ts

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

【问题讨论】：

标签： javascript angular controller components

【解决方案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)


}

【讨论】：

然后我必须在服务中创建方法，然后在我的用户控制器中再次创建它们。
在上面的例子中，UsersComponent 控制器类将继承它扩展的ServicesComponent 类的所有方法，它们不必重新实现。
我收到此错误。派生类的构造函数必须包含“超级”调用。
非常感谢。这适用于非组件，所以我可以拥有一个没有任何 angular2 组件属性的超类？
是的，继承只是 Typescript，与 Angular 无关 :-)

【解决方案2】：

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

【讨论】：

然后我必须在服务中创建方法，然后在我的控制器中再次创建它们。