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

【问题标题】：How to reuse a custom Angular2 component multiple time on a page?如何在页面上多次重用自定义 Angular2 组件？
【发布时间】：2017-06-05 07:30:23
【问题描述】：

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

如果我在我的 index.html 中使用 - 它会调用我的employeeComponent，它将根据属性 id（在本例中为“123”）从数据库中获取数据并填充 html 模板。假设出于简单的原因，它会填充该员工的姓名并返回类似

。

这第一次工作正常，我调用组件，在随后的调用中它不会显示任何错误，也不会呈现

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

我想要灵活性，我不想限制标签的数量。由于这是一个“视图组件”，我不希望它被限制在主/应用程序组件中。我想要纯粹的视图可重用性。

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);

任何帮助解决此问题？

【问题讨论】：

它应该可以工作。请提供minimal, complete, and verifiable example
您可能应该显示更多代码。组件以及引用组件的模板和控制器。这种方式很难提供帮助
@AArias - 用示例更新了我的问题

标签： angular custom-component

【解决方案1】：

看起来你可能搞混了，你应该引导你的 AppComponent 并在 AppComponent 模板中使用 EmployeeComponent，如果你想使用 angular 2 组件，你必须这样做。所以你的索引体最终会有这样的东西。

index.html

<body>
   <my-app>Loading...</my-app>
</body>

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

app.component.ts

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

app.component.html

<employee *ngFor="let employeeId of employeeIds" [employeeId]="employeeId"><employee>

employee.component.ts

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

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

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

我希望我能理解并以对您有所帮助的方式回答了您的问题。

【讨论】：

{{员工姓名}}