Angular2 -共享组件控制器

Angular2 - Share component controllers

本文关键字：控制器 组件 共享 Angular2      更新时间：2023-09-26

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

服务。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>{}; 
  }
}

是的，这就是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)

}

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

相关文章：