Question

我有一个名为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);

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

Answer 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组件？

{{employee_name}}

1 个答案: