Angular 2使2個幾乎相同的組件中的一個「通用」組件

Question

我有兩個組件幾乎完全相同，代碼可重用性我想將這些組件在我的項目中的不同位置組合使用。兩者都是帶複選框的下拉列表。唯一不同的是進出數據。

import {ROUTER_DIRECTIVES, RouteConfig, RouteParams, Router, RouterOutlet, RouterLink} from 'angular2/router'; 
import {FORM_PROVIDERS, FORM_DIRECTIVES, Control, NgClass, NgIf, CORE_DIRECTIVES} from 'angular2/common'; 
import {Component, Inject, Input, OnInit, OnChanges} from 'angular2/core'; 
import {Http, Headers, ContentHeaders, HTTP_PROVIDERS} from 'angular2/http'; 
import {User} from '/app/interfaces'; 
import {ActualsComponent } from '../actuals/actual.component'; 
import {ProjectService} from '../../projects/project.service'; 
import {LoginService} from '../../login/login.service'; 
import {SearchPipe} from '../custom-pipes/search-pipe'; 

@Component({ 
    selector: 'dropdown-users', 
    templateUrl: 'app/templates/elements/dropdown-users.html', 
    providers: [FORM_PROVIDERS, HTTP_PROVIDERS, ProjectService, LoginService], 
    directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES, RouterLink, CORE_DIRECTIVES, RouterOutlet], 
    pipes: [SearchPipe] 
}) 

export class DropDownUsers implements OnInit, OnChanges{ 
    projectdata: Object; 
    selectedUsers: Object; 

    public showMenu: boolean; 
    projectSearchTerm: Control = new Control(); 
    projectcount: number; 

    constructor(@Inject(ProjectService) projectService: ProjectService, @Inject(LoginService) loginService: LoginService, private http: Http, params: RouteParams) { 
     this.showMenu = false; 
     loginService.authenticate("user", "pwd"); 
     this.projectdata = loginService.data; 
     this.projectcount = 0; 
     this.selectedUsers = new Array(); 

    } 
    addUser(user: User){ 
     this.selectedUsers.push(user); 
    } 
} 

其他組件是相同的，除了它與用戶，而不是項目。

Answer 1

您可以製作具有通用功能的基類，並在想要繼承常見事物或更改/覆蓋特定事物時擴展它。

class Base { 
    selected: any[]; 
    constructor(DI_ARGS) { 
    this.selected = []; 
    } 
    add(o) { this.selected.push(o); } 
} 

@Component({ template: ` 
    <button (click)="add('Mike')">Add User</button> 
    <p>selected users: <a *ngFor="#user of selected">{{ user }}, </a></p> 
` }) 
class Users extends Base { 
    constructor(DI_ARGS) { 
    super(DI_ARGS); 
    } 
} 

@Component({ template: ` 
    <button (click)="add('build house')">Add Project</button> 
    <p>selected projects: <a *ngFor="#project of selected">{{ project }}, </a></p> 
` }) 
class Project extends Base { 
    constructor(DI_ARGS) { 
    super(DI_ARGS); 
    } 
} 

有一些注意事項壽'：

• 無法通過super()
• 你可以（在默認情況下使用的裝飾在基類
• 要使用依賴注入，你必須提供構造函數的參數）只擴展一個類