John John - 3 months ago 23
Javascript Question

Angular2 - Share component controllers

I have two page components that use the same methods with the exception of using two different type classes. The two components are called Services and Users. Both components use templates that are very similar with the exception of the class property info it displays. It seems to be inefficient to repeat methods on both controllers, is there a way to combine/share controllers.

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

Yep, this is where Angular's component-driven design and Typescripts's class-driven design really shine:

Having defined a ServicesComponent as you have above, you can simply extend that class and attach different component metadata to it:

@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)


} 
Comments