NgTemplateOutlet性能问题

Question

我想要创建一个使用角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秒来渲染整个列表。这是角质的问题吗？或者我在推荐信上做错了什么

Answer 1

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