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 материала и дерзость. у каждого элемента было много настраиваемых стилей , которые добавлены в html. Первое решение - изменить на ViewEncapsulation.None.