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 - 共享组件控制器

回答

相关问题