TypeScript elements.createCustomElement函數代碼示例

  constructor(public injector: Injector) {
    // shakemap-station constructor will be an HTMLElement if it's not
    // registered yet
    const stationConst = document.createElement('shakemap-station').constructor;

    if (stationConst === HTMLElement) {
      // shakemap-station element is not yet registered
      const station = createCustomElement(StationComponent, { injector });
      customElements.define('shakemap-station', station);
    }

    // create dyfi-response-popup
    const dyfiPopupConst = document.createElement('dyfi-response').constructor;

    if (dyfiPopupConst === HTMLElement) {
      // dyfi popup element is not yet registered
      const dyfiPopup = createCustomElement(DyfiResponsePopupComponent, {
        injector
      });
      customElements.define('dyfi-response', dyfiPopup);
    }

    // create finite-fault map popup
    const ffPopupConst = document.createElement('finite-fault-map-popup')
      .constructor;

    if (ffPopupConst === HTMLElement) {
      // finite fault popup is not yet registered
      const ffPopup = createCustomElement(FiniteFaultMapPopupComponent, {
        injector
      });
      customElements.define('finite-fault-map-popup', ffPopup);
    }
  }

 register<T>(moduleRef: NgModuleRef<any>, component: Type<T>) {
     //console.log(moduleRef);
     const componentFactory = moduleRef.componentFactoryResolver.resolveComponentFactory<T>(component);
     //console.log(componentFactory);
     // const ngElementConfig = getConfigFromComponentFactory(componentFactory, moduleRef.injector);
     const ngElementCtor = createCustomElement(component, { injector: moduleRef.injector });
     //console.log(ngElementCtor);
     customElements.define(componentFactory.selector, ngElementCtor);
 }

  ngOnInit() {
    let exampleElementCtor = customElements.get(this.id);

    if (!exampleElementCtor) {
      exampleElementCtor =
          createCustomElement(EXAMPLE_COMPONENTS[this.id].component, {injector: this._injector});

      customElements.define(this.id, exampleElementCtor);
    }

    this._elementRef.nativeElement.appendChild(new exampleElementCtor(this._injector));
  }

  ngDoBootstrap() {
    const elements: any[] = [
      [GoogleLoginComponent, 'google-login'],
      [ThemeBtnComponent, 'theme-btn'],
      [LazyComponent, 'lazy-content'],
      [RouteLoaderComponent, 'route-loader'],
      [UserProfileComponent, 'user-profile'],
      [AlgoliaSearchComponent, 'algolia-search'],
      [AlgoliaButtonComponent, 'algolia-button'],
      [VideoPlayerComponent, 'video-player'],
      [SlackMirrorComponent, 'slack-mirror'],
      [TogglerComponent, 'menu-toggler'],
      [NotificationComponent, 'app-notification']
    ];

    for (const [component, name] of elements) {
      const el = createCustomElement(component, { injector: this.injector });
      customElements.define(name, el);
    }
  }

  constructor(private injector: Injector) {
    const madeWithLoveElement = createCustomElement(MadeWithLoveComponent, { injector });

    customElements.define('made-with-love', madeWithLoveElement);
  }

 constructor(private injector: Injector) {
   customElements.define('hello-world-el', createCustomElement(HelloWorldComponent, {injector}));
   customElements.define(
       'hello-world-shadow-el', createCustomElement(HelloWorldShadowComponent, {injector}));
   customElements.define('test-card', createCustomElement(TestCardComponent, {injector}));
 }

  constructor(private injector: Injector) {
    const tileElm = createCustomElement(DashboardTileComponent, { injector: this.injector });

    customElements.define('dashboard-tile', tileElm);
  }

 constructor(private injector: Injector, public popup: PopupService) {
   // on init, convert PopupComponent to a custom element
   const PopupElement = createCustomElement(PopupComponent, { injector: this.injector });
   // register the custom element with the browser.
   customElements.define('popup-element', PopupElement);
 }

 ngDoBootstrap() {
   const elm = createCustomElement(AppComponent, { injector: this.injector });
   customElements.define('custom-element', elm);
 }

 Object.keys(EXAMPLE_COMPONENTS).forEach(key => {
   const element = createCustomElement(EXAMPLE_COMPONENTS[key].component, {injector});
   customElements.define(key, element);
 });