如何在页面上多次重用自定义Angular2组件？

我有一个名为employee的简单Angular2组件,它根据其属性的值填充并返回HTML模板.例如

如果我使用,在我的index.html中 - 它将调用我的employeeComponent,它将从数据库中获取基于属性id(在本例中为"123")的数据并填充html模板.让我们说,出于简单的原因,它填充该员工的名称并返回类似的内容

{{员工姓名}}

这是第一次工作正常,我调用组件,并在后续调用它不显示任何错误,也不渲染

我想要灵活性,我不想限制标签数量.由于这是一个'视图组件',我不希望它被限制在main/app组件中.我想要纯粹的视图可重用性.

employee.component.ts

import {Component,  ElementRef}  from 'angular2/core';


@Component({
    selector: 'employee',   
    template: '{{id}}'
})

export class EmployeeComponent {
     id: number;
     name : string;

    constructor(elm: ElementRef){
         this.id = elm.nativeElement.getAttribute('id');
         console.log(elm.nativeElement);
    }

}

的index.html

main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {EmployeeComponent} from './employee.component';

bootstrap(AppComponent);
bootstrap(EmployeeComponent);

有什么帮助可以解决这个问题？

看起来你可能会混淆,你应该引导你的AppComponent并使用AppComponent模板中的EmployeeComponent,如果你想使用angular 2组件,你就必须这样做.所以你的索引体最终得到这样的东西.

的index.html

   Loading...

如果设置了此结构,则可以在app.component.ts中定义控件ID,并且可以使用ngFor将输入插入到组件中.然后会有不同的EmployeeComponents包含您的每个id,您可以设置一个服务从员工中提取数据库中的相关信息.

app.component.ts

export class EmployeeComponent {
    employeeIds: number[] = [123,124,125]
}

app.component.html

employee.component.ts

import {Component,  ElementRef, Input}  from 'angular2/core';

@Component({
    selector: 'employee',   
    template: '{{id}}'
})

export class EmployeeComponent {
    @input() id: number;
}

我希望我理解并以有帮助的方式回答了你的问题.