NgTemplateOutlet性能問題

我想創建一個使用角度2的通用列表，它獲取一個組件作爲它的項目並使用該項目實現列表行爲。NgTemplateOutlet性能問題

@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 秒使整個列表非常緩慢。這是角度問題嗎？或者我做一些錯誤的引用

來源

2016-09-29 Nicu

另外我應該提到我是Angular 2 RC.5。如果是RC.5問題，我會更新到2.0最終 – Nicu

多少項目？如果使用'ngForTemplate'的'* ngFor'更快，你可以嘗試。我認爲RC.5以來沒有太多相關的變化，但我可能會錯過一些東西。無論如何，升級將是一個好主意。您是否還使用AoT和prodMode而不是devMode檢查了性能？ –

3個物品，它隨着時間的推移而減慢，第一次呈現2秒，我清空列表並填充它再次呈現5秒，我想我嘗試了7次，最後一次花費了9秒 – Nicu

問題是ViewEncapsulation.Native，因爲我還使用角2材料和青菜。每個項目都有很多自定義樣式被附加到HTML。第一種解決方案是更改爲 ViewEncapsulation.None。

來源

2016-09-29 10:16:45 Nicu

NgTemplateOutlet性能問題

回答

相關問題