小编Gau*_*inh的帖子

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

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

{{员工姓名}}

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

<employee id="123"></employee>
<employee id="121"></employee>
<employee id="122"></employee>

我想要灵活性,我不想限制标签数量.由于这是一个'视图组件',我不希望它被限制在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

 <employee id="123"></employee>
  <employee id="121"></employee>
  <employee id="122"></employee>

main.ts

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

bootstrap(AppComponent);
bootstrap(EmployeeComponent);

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