Angular2 - Share контроллеры компонентов

Question

У меня есть два компонента страницы, которые используют те же методы, за исключением использования двух разных классов типов. Эти два компонента называются службами и пользователями. Оба компонента используют шаблоны, которые очень похожи, за исключением отображаемой информации о свойствах класса. Кажется неэффективным повторять методы на обоих контроллерах, есть ли способ комбинировать/совместно использовать контроллеры.

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

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

Answer 1

Да, это где компонент управляемой конструкция угловой и дизайн класса управляемого машинописный действительно светят:

Определив 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

Я считаю, что вы можете создать службу с одним набором методов и передать в объекте. Затем отбросьте объект к нужному классу и используйте его в методе.