TypeScript core.ComponentFactoryResolver類代碼示例

  /** Attach the given ComponentPortal to this PortalHost using the ComponentFactoryResolver. */
  attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
    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;

    let componentFactory =
        this._componentFactoryResolver.resolveComponentFactory(portal.component);
    let ref = viewContainerRef.createComponent(
        componentFactory, viewContainerRef.length,
        portal.injector || viewContainerRef.parentInjector);

    this.setDisposeFn(() => ref.destroy());
    return ref;
  }

  /**
   * Attach the given ComponentPortal to DOM element using the ComponentFactoryResolver.
   * @param portal Portal to be attached
   */
  attachComponentPortal<T>(
    portal: ComponentPortal<T>,
    newestOnTop: boolean,
  ): ComponentRef<T> {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(
      portal.component,
    );
    let componentRef: ComponentRef<T>;

    // If the portal specifies a ViewContainerRef, we will use that as the attachment point
    // for the component (in terms of Angular's component tree, not rendering).
    // When the ViewContainerRef is missing, we use the factory to create the component directly
    // and then manually attach the ChangeDetector for that component to the application (which
    // happens automatically when using a ViewContainer).
    componentRef = componentFactory.create(portal.injector);

    // When creating a component outside of a ViewContainer, we need to manually register
    // its ChangeDetector with the application. This API is unfortunately not yet published
    // in Angular core. The change detector must also be deregistered when the component
    // is destroyed to prevent memory leaks.
    this._appRef.attachView(componentRef.hostView);

    this.setDisposeFn(() => {
      this._appRef.detachView(componentRef.hostView);
      componentRef.destroy();
    });

    // At this point the component has been instantiated, so we move it to the location in the DOM
    // where we want it to be rendered.
    if (newestOnTop) {
      this._hostDomElement.insertBefore(
        this._getComponentRootNode(componentRef),
        this._hostDomElement.firstChild,
      );
    } else {
      this._hostDomElement.appendChild(
        this._getComponentRootNode(componentRef),
      );
    }

    return componentRef;
  }

 private _getContentRef(
     moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any,
     context: NgbActiveModal): ContentRef {
   if (!content) {
     return new ContentRef([]);
   } else if (content instanceof TemplateRef) {
     const viewRef = content.createEmbeddedView(context);
     this._applicationRef.attachView(viewRef);
     return new ContentRef([viewRef.rootNodes], viewRef);
   } else if (isString(content)) {
     return new ContentRef([[document.createTextNode(`${content}`)]]);
   } else {
     const contentCmptFactory = moduleCFR.resolveComponentFactory(content);
     const modalContentInjector =
         ReflectiveInjector.resolveAndCreate([{provide: NgbActiveModal, useValue: context}], contentInjector);
     const componentRef = contentCmptFactory.create(modalContentInjector);
     this._applicationRef.attachView(componentRef.hostView);
     return new ContentRef([[componentRef.location.nativeElement]], componentRef.hostView, componentRef);
   }
 }

    ngOnInit() {
        if (!this.id) {
            return;
        }

        const componentType = this.extensionService.getComponentById(this.id);
        if (componentType) {
            const factory = this.componentFactoryResolver.resolveComponentFactory(
                componentType
            );
            if (factory) {
                this.content.clear();
                this.componentRef = this.content.createComponent(factory, 0);
                this.updateInstance();
            }
        }
    }

        this._zone.run(() => {
          const injector = Injector.create({
            providers: [
              {provide: Params, useValue: new Params(params || {})},
              {provide: OnsSplitterSide, useValue: this}
            ],
            parent: this._injector
          });

          const factory = this._resolver.resolveComponentFactory(page);
          const pageComponentRef = this._viewContainer.createComponent(factory, 0, injector);
          const pageElement = pageComponentRef.location.nativeElement;
          componentRefMap.set(pageElement, pageComponentRef);

          this.element.appendChild(pageElement); // dirty fix to insert in correct position

          done(pageElement);
        });

        this._zone.run(() => {
          const factory = this._resolver.resolveComponentFactory(componentType);
          const injector = ReflectiveInjector.resolveAndCreate([
            {provide: Params, useValue: new Params(params)}
          ], this._injector);
          const componentRef = factory.create(injector);
          const rootElement = componentRef.location.nativeElement;

          this._componentLoader.load(componentRef);

          const element = rootElement.children[0];
          const alertDialogElement = element.tagName === 'ONS-ALERT-DIALOG' ? element : element.querySelector('ons-alert-dialog');

          if (!alertDialogElement) {
            throw Error('<ons-alert-dialog> element is not found in component\'s template.');
          }

          resolve({alertDialog: alertDialogElement, destroy: () => componentRef.destroy()});
        });

      setImmediate(() => {
        const factory = this._resolver.resolveComponentFactory(componentType);
        const injector = ReflectiveInjector.resolveAndCreate([
          {provide: Params, useValue: new Params(params)}
        ], this._injector);
        const componentRef = factory.create(injector);
        const rootElement = componentRef.location.nativeElement;

        this._componentLoader.load(componentRef);

        const element = rootElement.children[0];
        const modalElement = element.tagName === 'ONS-MODAL' ? element : element.querySelector('ons-modal');

        if (!modalElement) {
          throw Error('<ons-modal> element is not found in component\'s template.');
        }

        resolve({modal: modalElement, destroy: () => componentRef.destroy()});
      });

      this.route.url.subscribe(urls => {
        const p = [];
        urls.forEach(url => {
          p.push(url.path);
        });
        const path = p.join('/');
        this.screen = this.reg.screens[this.route.routeConfig.path];

        if (!this.screen) {
          throw new Error('Screen not found in registry');
        }
        const factory = this.resolver.resolveComponentFactory<any>(this.screen.component);
        const componentRef = this.container.createComponent(factory);
        this.title.setTitle(this.screen.title);
        componentRef.instance.viewConfig = this.screen;
        Object.keys(this.route.snapshot.params).forEach(k => {
          componentRef.instance[k] = this.route.snapshot.params[k];
        });
        this.dynamicComponentContainer.insert(componentRef.hostView);
      });

        return function(
            node: Node,
            view: EditorView,
            getPos: () => number,
            decorations: Decoration[],
        ) {
            const injector = Injector.create({
                parent: parentInjector,
                providers: [
                    {
                        provide: NodeViewContext,
                        useValue: new NodeViewContext(node, view, getPos, decorations),
                    },
                ],
            })

            if (opts.directive) {
                return injector.get(componentOrDirective)
            } else {
                const componentFactory = componentFactoryResolver.resolveComponentFactory(
                    componentOrDirective,
                )
                const componentRef = componentFactory.create(injector)

                zone.onStable.pipe(take(1)).subscribe(() => {
                    appRef.attachView(componentRef.hostView)
                })

                if (componentRef.instance.destroy) {
                    componentRef.instance.destroy = () => {
                        componentRef.instance.destroy()
                        componentRef.destroy()
                    }
                } else {
                    componentRef.instance.destroy = () => componentRef.destroy()
                }

                // type casting to access hidden prop
                return componentRef.instance
            }
        }

 this._answer.get_count_answer_by_question(element.question_id).subscribe((r:any)=>{
   for (let index = 0; index < data.length; index++) {
     if(element.questiontype_code == 'SR'){
       let choice_content = JSON.parse(element.choices[0].choice_content);
       let icon = choice_content.icon;
       doughnutChartLabels = data.map(item => item.answer_value + ' ' + icon);
     }else{
       doughnutChartLabels = data.map(item => item.choice_content);
     }
       doughnutChartData =data.map(item => item.answer_count);
   }
   barChartLabels = doughnutChartLabels;
   barChartData = [
     {data : doughnutChartData, label : 'số lần chọn' }
   ];
   let data1 = r.Data;
   let item : any = {};
   item.barChartData = barChartData;
   item.barChartLabels = barChartLabels;
   item.doughnutChartData = doughnutChartData;
   item.doughnutChartLabels  = doughnutChartLabels;
   item.question_content = element.question_content;
   item.question_ordered = element.question_ordered;
   item.question_id = element.question_id;
   item.answered_number = String(data1[0].answered_number);
   item.not_answered_number = String(data1[0].not_answered_number);
   //lstReport.push(item);
   const factory = this._cr.resolveComponentFactory(ReportMultiChoiceComponent);
   const choice =  this.questionContainer.createComponent(factory);
   choice.instance.barChartData = barChartData;
   choice.instance.barChartLabels =barChartLabels;
   choice.instance.doughnutChartData = doughnutChartData;
   choice.instance.doughnutChartLabels = doughnutChartLabels;
   choice.instance.question_content = element.content;
   choice.instance.question_ordered = element.question_ordered;
   choice.instance.question_id = element.question_id;
   choice.instance.typeChart= 'doughnut';
   choice.instance.answered_number = String(data1[0].answered_number);
   choice.instance.not_answered_number = String(data1[0].not_answered_number);
   choice.instance.change.subscribe(event => this.changeChart(event)); 
 });