Gau*_*inh 2 custom-component angular
我有一个名为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);
有什么帮助可以解决这个问题？
看起来你可能会混淆,你应该引导你的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;
}
我希望我理解并以有帮助的方式回答了你的问题.
| 归档时间： |
|
| 查看次数： |
3543 次 |
| 最近记录： |