如何在页面上多次重用自定义 Angular2 组件？
Posted
技术标签:
【中文标题】如何在页面上多次重用自定义 Angular2 组件？【英文标题】：How to reuse a custom Angular2 component multiple time on a page? 【发布时间】：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 - 用示例更新了我的问题 【参考方案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;
我希望我能理解并以对您有所帮助的方式回答了您的问题。
【讨论】：
以上是关于如何在页面上多次重用自定义 Angular2 组件？的主要内容，如果未能解决你的问题，请参考以下文章