Angular2 - 共享組件控制器

我有兩個頁面組件使用相同的方法，但使用兩個不同類型的類除外。這兩個組件稱爲服務和用戶。這兩個組件都使用與其顯示的類屬性信息異常非常相似的模板。在兩個控制器上重複使用方法似乎效率不高，是否有組合/共享控制器的方法。Angular2 - 共享組件控制器

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

來源

2016-08-21 John

沒錯，這就是角的組件驅動設計和打字稿的類驅動設計大放異彩：

在定義了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) 


}

來源

2016-08-21 18:22:53 drewmoore

然後，我必須在servic中創建方法，然後在我的用戶控制器中再次創建它們。 – John

在上面的例子中，'UsersComponent'控制器類將繼承它所擴展的'ServicesComponent'類的所有方法，它們不必被重新實現。 – drewmoore

我得到這個錯誤。派生類的構造函數必須包含「超級」調用。 – John

我相信你可以創建一個單一的一套方法服務和傳遞的對象。然後將對象轉換爲所需的類並在方法中使用它。

來源

2016-08-21 18:21:04

然後，我必須在一個服務，然後讓他們再次在我的控制器中的方法。 – John

Angular2 - 共享組件控制器

回答

相關問題