각도 2의 부품에 게으른 하중을 가하는 방법이 있습니까?

Question

ngIf 문과 함께 다른 구성 요소를 사용하는 구성 요소가 있습니다. ngIf가 true로 평가되면 두 번째 구성 요소 만로드하려고합니다.

편집 : 필요한 항목을 거의 수행 할 수있는 문서를 찾았습니다 : https://medium.com/@matanlurey/lazy-loading-with-angular-dart-14f58004f988. 그러나 라이브러리를로드 한 후에는 구성 요소의 전체보기가 필요합니다. 필자의 경우, 부모 컴포넌트의 html에있는 특정 위치에 그것을 삽입해야한다. 같은

뭔가 :

import '../other/edit_component.dart' deferred as otherEdit; 

@Component(
    selector: 'edit-component', 
    template: '<other-component *ngIf="canOther"></other-component> 
    <button type="button" (click)="go()"></button>', 
    directives: const [ 
     otherEdit.OtherComponent 
    ] 
) 
class EditComponent { 
    @Input() 
    bool canOther = false; 

    go() { 
    otherEdit.loadLibrary(); 
    canOther = true; 
    } 
} 

Answer 1

방금 ​​작동했습니다. DynamicComponent를 rkj answer의 예제로 사용했습니다.

// the lib that has the component to be loaded 
import 'package:somecomponent.dart' deferred as mycomponent; 

class mainComponent { 
    // <div #holder></div> element that we will append the component 
    @ViewChild('holder', read: ViewContainerRef) 
    ViewContainerRef holder; 

    // this will load the component dynamically 
    final DynamicComponentLoader _componentLoader; 

    load() { 
    // clear the html 
    holder.clear(); 

    // load the component dynamically 
    ComponentRef componentRef = await _componentLoader 
     .loadNextToLocation(componentType, holder); 

    // set some attributes like you would with [attributes]="somevar" 
    componentRef.instance 
     ..attribute = somevar; 
    } 

    mainComponent(this. _componentLoader){} 
} 

Answer 2

난 당신이 직접 할 수 있다고 생각하지 않습니다. 대신 Angular2_components에서 DynamicComponent을 사용하고 느리게로드 한 후 유형을 전달하십시오.