Angular 2 制作一个“通用"2 个几乎相同的组件中的组件 [英] Angular 2 making one "generic" component out of 2 almost identical components
本文介绍了Angular 2 制作一个“通用"2 个几乎相同的组件中的组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有 2 个几乎相同的组件,为了代码的可重用性,我想将它们组合起来以在我的项目的不同位置使用.两者都是带有复选框的下拉列表.唯一不同的是进出的数据.
I have 2 components that are almost identical and for code reusability I would like to combine those to use in different places in my project. Both are dropdownlists with a checkbox. Only difference is the data that comes in and out.
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);
}
}
另一个组件是相同的,只是它适用于用户而不是项目.
The other component is the same, except it works with users instead of projects.
推荐答案
你可以创建一个具有通用功能的基类,并在你想继承通用的东西,或者改变/覆盖特定的东西时扩展它.
You can make a base class with common functionality and extend it when you want to inherit common things, or change/overwrite specific things.
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()
提供构造函数参数 - 您(默认情况下)只能扩展一个类
这篇关于Angular 2 制作一个“通用"2 个几乎相同的组件中的组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文