TypeScript core.DynamicComponentLoader類代碼示例

  /** Attach the given ComponentPortal to this PortlHost using the DynamicComponentLoader. */
  attachComponentPortal(portal: ComponentPortal): Promise<ComponentRef<any>> {
    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 viewContainerRef = portal.viewContainerRef != null ?
        portal.viewContainerRef :
        this._viewContainerRef;

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

  constructor(dcl: DynamicComponentLoader, viewContainerRef: ViewContainerRef) {
  	
  	this.cities = [];
    this.cities.push({label:'New York', value:'New York'});
    this.cities.push({label:'Rome', value:'Rome'});
    this.cities.push({label:'London', value:'London'});
    this.cities.push({label:'Istanbul', value:'Istanbul'});
    this.cities.push({label:'Paris', value:'Paris'});

    this.selected = 'Rome';

    dcl.loadNextToLocation(Dropdown, viewContainerRef)
    .then((res) => {
      res.instance.options = this.cities;
      res.instance.value = this.selected;
    });

  }

 _loadTreeNodeContent() {
   this.componentLoader.loadNextToLocation(this.treeModel.treeNodeContentComponent,
                                           this.viewContainerRef)
     .then((componentRef) => {
       componentRef.instance.node = this.node;
     });
 }

	ngOnInit() {
		for(var i = 0; i < this.grid.length; i++) {
			var selector: string = '.tile-content-' + i;
			var tile = this.grid[i];
			this.loader.loadAsRoot(tile.component, selector, this.injector);	
		}
	}

    createCmp(cmp, isDock = true)
    {
        window['cmpMap'] = window['cmpMap'] || {}
        window['cmpList'] = window['cmpList'] || {}
        const ref = this.dcl.loadNextToLocation(cmp, this.viewContainerRef)
        
        ref.then(ref=>
        {
                
                var name = ref['_componentType'].name
                const component = ref['_hostElement'].component
                    // console.log( 3333333,name)
                window['cmpList'][name] = window['cmpList'][name] || []
                window['cmpList'][name].push(ref)
                const id = idIndex++
                const element = $(ref['_hostElement']['nativeElement'])
                element.attr('id', id)
                window['cmpMap'][id] = ref
                
                if( !isDock )
                    return




            setTimeout(()=> 
            {
                if( name === 'UrlAppCmp' )
                    name = component.url
                
                ref.onDestroy(()=>{
                    dockMap[name].items.forEach((item, index)=>{
                        if( item._id === id )
                            dockMap[name].items.splice(index, 1)
                    })
                })    
                
                if( dockMap[name] ){
                    var data = { _id: id, title: component.title, element: element }
                    dockMap[name].items.push(data)
                    setTimeout(()=> {
                        data.title = component.title
                    }, 100);
                }
                else{
                    dockMap[name] = {_id: 'folder', items: [{ _id: id, title: component.title, element: element, component: component }], icon: component.dockbar_icon }
                    dockAppList.push(dockMap[name])
                    setTimeout(()=> {
                        dockMap[name].items[0].title = component.title
                    }, 1000);
                }
            })
            
        })
        
        return ref

        // return new 
    }

 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));
 });

  clicking() {
    console.log('nir clicked');

    this.dcl.loadNextToLocation(FreeTextOperandTemplate, this.target)
      .then(cmpRef => {
        //cmpRef.instance.freeText.value = this.baz;
        console.log(cmpRef.instance.freeText);
      });
  }

 ngOnInit(){
   this._loader.loadAsRoot(this.steps[0].component, '#multistep-outline', this.injector);
   this.steps.forEach((obj, iter)=> {
     if(iter === 0) {
       this.stepStyles[iter] = 'doing';
     }
     else {
        this.stepStyles[iter] = 'todo';
     }
   });
   this.lastStepNumber = this.steps.length;
 }

 changeStep(stepNumber){
   if(stepNumber < this.lastStepNumber && stepNumber >= 0) {
     this._loader.loadAsRoot(this.steps[stepNumber].component, '#multistep-outline', this.injector);
     for (let i = stepNumber - 1; i >= 0; i--) {
       this.stepStyles[i] = 'done';
     }
     this.stepStyles[stepNumber] = 'doing';
     for (let i = stepNumber + 1; i < this.lastStepNumber; i++) {
       this.stepStyles[i] = 'todo'; 
     }
     this.currentStep = stepNumber;
   }
 }

  handleRouteChange(def: RouteDefinition) {
    this.loader.loadNextToLocation(def.component, this.containerRef)
      .then((ref:ComponentRef<any>) => {
        // Clean up any old component that may not have finished animating out.
        this.destroyPreviousComponent(this.prevComponentRef);

        this.prevComponentRef = this.currComponentRef;
        this.currComponentRef = ref;

        // Clean up the old component after letting it animate out.
        setTimeout(this.destroyPreviousComponent.bind(this, this.prevComponentRef),
            MAX_VIEW_ANIMATION_DURATION);
      });
  }