TypeScript DynamicComponentLoader.loadNextToLocation方法代碼示例

 ngAfterViewInit() {
     this.componentLoader.loadNextToLocation(
         this.dialogInstance.componentType, this._viewRef, this.dialogInstance.modalDataBindings)
         .then((contentRef: ComponentRef) => {
             this.dialogInstance.contentRef = contentRef;
         });
 }

 ngAfterViewInit() {
     this._dlc
         .loadNextToLocation(this._compileConfig.component,
             this._viewContainer,
             this._compileConfig.bindings)
         .then(contentRef => this.dialog.contentRef = contentRef);
 }

 this.edgeService.getCoordinates().subscribe(coordinates => {
     this.dynamicComponentLoader
         .loadNextToLocation(Edge,coordinates.first.viewContainer)
         .then((res) => {
           res.instance.setCoordinates(coordinates.first, coordinates.second);
         })
         .catch(e => console.log(e));
 });

  /** Attach the given ComponentPortal to DOM element using the DynamicComponentLoader. */
  attachComponentPortal(portal: ComponentPortal): Promise<ComponentRef> {
    if (portal.origin == null) {
      throw new MdComponentPortalAttachedToDomWithoutOriginException();
    }

    return this._componentLoader.loadNextToLocation(portal.component, portal.origin).then(ref => {
      this._hostDomElement.appendChild(ref.hostView.rootNodes[0]);
      this.setDisposeFn(() => ref.dispose());
      return ref;
    });
  }

 return this.disposeDynCmp().then(() => {
   let component = this.popup.component;
   this.cmpRef = this.dcl.loadNextToLocation(component, this.dynCmp)
     .then(cmp => {
       if (this.popup.componentOptions) {
         cmp.instance.popupOptions = this.popup.componentOptions;
       }
       cmp.instance.popup = this.popup;
       return cmp;
     });
   this.visible = true;
 });

  /** Attach the given ComponentPortal to this PortlHost using the DynamicComponentLoader. */
  attachComponentPortal(portal: ComponentPortal): Promise<ComponentRef> {
    portal.setAttachedHost(this);

    // If the portal specifies an origin, use that as the logical location of the component
    // in the application tree. Otherwise use the location of this PortalHost.
    let elementRef = portal.origin != null ? portal.origin : this._elementRef;

    // Typecast is necessary for Dart transpilation.
    return this._dynamicComponentLoader.loadNextToLocation(portal.component, elementRef)
      .then(ref => {
        this.setDisposeFn(() => ref.dispose());
        return ref;
      });
  }

    loaderAction() {

        let child = this.loader.loadNextToLocation(ChildComponent, this.vcRef)
            .then((chidRef: ComponentRef) => {
                let instance = chidRef.instance;

                instance.ref = chidRef
                instance.name = '动态';

                instance.finally.subscribe((user) => {
                    chidRef.destroy();
                    this.user = user;
                    console.log('done');
                })
            })
    }

    openDialog(componentType: ConcreteType, parentElement: ElementRef, opts?: any): Observable<any> {

        let observable = Observable.fromPromise(this.componentLoader.loadNextToLocation(componentType, parentElement));
        observable.subscribe((containerRef: ComponentRef) => {
                if (containerRef.instance.hidden === undefined || !!containerRef.instance.hidden ) {
                    containerRef.instance.init(opts).subscribe(() => {
                        containerRef.dispose();
                    });
                    containerRef.instance.open();
                }
            },
            err => this.logService.logError('Error' + err)
        );

        return observable;
    }

    public open() {
		let elementRef: ElementRef = this._appRef['_rootComponents'][0].location;
		
		// var otherResolved = Injector.resolve([
			// provide('locationEl', {useValue: elementRef}),
			// provide(Location, {useValue: this._location})
		// ]);
			
		let promise = this._componentLoader.loadNextToLocation(ModalComponent, elementRef/*, otherResolved*/);
		
		promise.then(modalComponentRef => {
			modalComponentRef.instance._ref = modalComponentRef;
			
			return modalComponentRef;
		});	
		
		return promise;
    }

 this.views.updated.subscribe((representation) => {
     // Not sure how efficient this is at replacing the DOM. Gut tells me it's exspensive.
     // Could create a single view/template with ngIfs and a ViewModel that it would bind to.
     // ViewModel properties would updated based on state
     if (this.component == undefined || this.component.componentType.name !== representation.name) {
         var promise = this.loader.loadNextToLocation(representation, this.viewport);
         promise.catch((reason) => {
             console.error(reason);
         });
         promise.then((component) => {
             console.log(component);
         });
         //this.loader.loadNextToLocation(representation, this.viewport);//.then((component) => {
             //if(this.component && isPresent(this.component)){
             //    (this.component as any).dispose();
             //    this.component = null;
             //}
             //component.instance.rocket = this;
             //this.component = component;
         //});
     }
 });