Angular NgTemplateOutlet性能问题

我想用angular 2创建一个通用列表，它得到一个 组件作为其项，并使用该项实现列表行为

@组件({
moduleId:module.id，
选择器：“通用列表”，
模板：`
`,
风格：[`
md导航列表{
填充顶部：8px；
}
`]
})
导出类GenericListComponent{
@输入（'generic-list'）genericList:数组；
@ContentChild（'templateReference'）templateReference:TemplateRef；
@输出（'on-select'）onSelectEmitter:EventEmitter=new EventEmitter（）；
emitClickEvent（项目）{
this.onSelectEmitter.emit（项）
}
}

这是通用列表，这是我的内容

@组件({
moduleId:module.id，
选择器：“通用内容”，
模板：`
`
})
导出类GenericContentComponent{
@输入（'item-data'）itemData:Object；
@输入（'template-reference'）templateReference:TemplateRef；
}
导出接口项目板{
itemData：对象；
背景：任何；
}

一切正常，但现在我将使用一个项目来填充列表

@组件({
moduleId:module.id，
选择器：'员工项目'，
模板：
`
{{itemData.EMPLOYEE_ID}
{{itemData.PAYROLL\u emp\u NO}
`,
封装：viewEncapsation.Native，
样式URL:['./employee item.component.css']
})
导出类EmployeeItemComponent{
@Input（）itemData：员工；
}
出口类员工{
employeeId：编号；
employeeName:字符串；
}

把所有的东西都放在一个组件里

@组件({
moduleId:module.id，
选择器：'员工列表'，
模板：`
`,
风格：[
'.employee list{转换：宽度缓进缓出；}'
]
})
导出类EmployeeListComponent实现OnInit{
@输入（'employee-list'）employeeList:数组；
@输出（'on-employee-select'）employeeSelectEmitter:EventEmitter=neweventemitter（）；
私营雇员；
构造函数（）{}
ngOnInit（）{}
员工选择（$event）{
如果（！$事件）{
返回；
}
if（this.selectedEmployee&&this.selectedEmployee.selected）{
this.selectedEmployee.selected=false；
}
this.selectedEmployee=$event；
this.selectedEmployee.selected=true；
this.employeeSelectEmitter.emit（$event）；
}
}

问题是这个洞很慢，需要5到6分钟 秒以呈现整个列表。这是一个角度的问题吗？或 我把参考资料弄错了

问题是

ViewEncapsulation.Native

，因为我也在使用 角2材料和sass。每个项目都有很多自定义样式 它们被附加到html中。第一个解决办法是改为

视图封装。无

---

我还应该提到我是棱角分明的2 RC.5。如果是RC.5问题，我将更新到2.0最终有多少项？如果使用

ngForTemplate

的

*ngFor

更快，您可以尝试。我不认为有太多相关的变化，因为RC.5，但我可能会错过一些东西。无论如何，升级将是一个好主意。您是否也使用AoT和prodMode而不是devMode检查了性能？3项，它会随着时间的推移而变慢，第一次渲染2秒，我清空列表并再次填充，第二次渲染5秒，我想我尝试了7次，最后一次大概花了9秒。你能在Plunker中复制吗？我们可以试试temviewer。这个项目很大，我看到Plunker只有ng2 beta.01

    @Component({
    moduleId: module.id,
    selector: 'generic-list',
    template:  `
         <md-nav-list>
     <generic-content *ngFor="let item of genericList" (click)="emitClickEvent(item)"
        [item-data]="item"
        [template-reference]="templateReference">
    </generic-content>
</md-nav-list>
    `,
    styles:[`
        md-nav-list {
            padding-top: 8px;
        }
    `]
})
export class GenericListComponent {
    @Input('generic-list') genericList: Array<Object>;
    @ContentChild('templateReference') templateReference: TemplateRef<ITemplate>;

    @Output('on-select') onSelectEmitter: EventEmitter<Object> = new EventEmitter<Object>();

    emitClickEvent(item){
        this.onSelectEmitter.emit(item)
    }
}

@Component({
    moduleId: module.id,
    selector: 'generic-content',
    template: `
    <template [ngTemplateOutlet]="templateReference" [ngOutletContext]="{ $implicit: itemData }"></template>
    `
})
export class GenericContentComponent {
    @Input('item-data') itemData: Object;
    @Input('template-reference') templateReference: TemplateRef<ITemplate>;
}

export interface ITemplate {
    itemData: Object;
    context: any;
}

@Component({
    moduleId: module.id,
    selector: 'employee-item',
    template:
    `
    <div *ngIf="itemData" class="employee-item" [class.selected]="itemData.selected">
    <div class="employee-name">
        {{itemData.EMPLOYEE_ID}}
    </div>
    <div class="employee-number">
        {{itemData.PAYROLL_EMPL_NO}}
    </div>
</div>
    `,
    encapsulation: ViewEncapsulation.Native,
    styleUrls: ['./employee-item.component.css']
})

export class EmployeeItemComponent {
    @Input() itemData: Employee;
}

export class Employee {
    employeeId: number;
    employeeName: string;
}

@Component({
    moduleId: module.id,
    selector: 'employee-list',
    template: `
    <generic-list class="employee-list" [generic-list]="emplyeeList" [style.width]="emplyeeList && emplyeeList.length === 0 ? '0px' : 'auto'" (on-select)="employeeSelect($event)">
    <template #templateReference let-itemData>
        <employee-item [itemData]="itemData"></employee-item>
    </template>
    </generic-list>
    `,
    styles: [
        '.employee-list {transition: width ease-in-out;}'
    ]
})
export class EmployeeListComponent implements OnInit {
    @Input('employee-list') emplyeeList: Array<Object>;
    @Output('on-employee-select') employeeSelectEmitter: EventEmitter<Object> = new EventEmitter<Object>();

    private selectedEmployee;

    constructor() { }

    ngOnInit() { }

    employeeSelect($event) {
        if (!$event) {
            return;
        }

        if (this.selectedEmployee && this.selectedEmployee.selected) {
            this.selectedEmployee.selected = false;
        }

        this.selectedEmployee = $event;
        this.selectedEmployee.selected = true;

        this.employeeSelectEmitter.emit($event);
    }
}