有沒有辦法在角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

我認為您不能直接做到。 您可以做的是使用Angular2_components中的DynamicComponent ，並在延遲加載后傳遞類型。

Answer 2

剛剛使它工作。 使用rkj答案中的DynamicComponent作為示例。

// 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){}
}