NgTemplateOutlet 性能问题答案

【问题标题】：NgTemplateOutlet performance problemsNgTemplateOutlet 性能问题
【发布时间】：2017-02-07 11:06:27
【问题描述】：

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

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

问题是洞的东西很慢，需要 5 或 6 秒来呈现整个列表。这是 angular 的问题吗？要么我对参考资料做错了

【问题讨论】：

另外我应该提到我是 Angular 2 RC.5。如果是 RC.5 问题我会更新到 2.0 final
有多少项？你可以试试*ngFor 和ngForTemplate 是否更快。我认为自 RC.5 以来没有太多相关的变化，但我可能会错过一些东西。无论如何，升级将是一个好主意。您是否还使用 AoT 和 prodMode 而不是 devMode 检查了性能？
3 个项目，随着时间的推移它会变慢，第一次渲染 2 秒，我清空列表并再次填充，第二次渲染 5 秒，我想我尝试了 7 次，最后一次花了 9 秒
听起来很极端。你能在 Plunker 中复制吗？
我们可以试试 temviewer 项目很大，我看到 plunker 只有 ng2 beta.01

标签： angular typescript angular2-template angular2-directives

【解决方案1】：

问题是ViewEncapsulation.Native，因为我也在使用角度2材料和sass。每个项目都有很多自定义样式附加到 html 中。第一个解决方案是更改为 ViewEncapsulation.None.

【讨论】：