Question

我想使用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 秒呈现整个列表。这是角度问题吗？要么我对参考文献
做错了

Answer 1

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

NgTemplateOutlet性能问题

1 个答案: