angular - 如何在内容脚本中引导 Angular 应用程序

Question

我正在尝试在内容脚本中引导 Angular 应用程序，这样只要 div 可见，就应该引导 Angular 应用程序。

我找到了一种手动引导 Angular 应用程序的方法，代码如下。

问题是我将通过manifest文件在内容脚本中加载一次角度包。但是，特定的 div 可以一次又一次地显示和销毁。如何与这个事实调和？

应用模块

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  entryComponents: [AppComponent]
  // bootstrap: [AppComponent]
})
export class AppModule { 

  ngDoBootstrap(app: ApplicationRef) { 
    // obtain reference to the DOM element that shows status
    // and change the status to `Loaded`
    const dynamicComponentElement = document.querySelector('#sidebar');
    dynamicComponentElement.textContent = 'Loaded';
    // create DOM element for the component being bootstrapped
    // and add it to the DOM
    const componentElement = document.createElement('app-root');
    document.body.appendChild(componentElement);
    // bootstrap the application with the component
    app.bootstrap(AppComponent);
  }

}

在main.ts文件中

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  // Ensure Angular destroys itself on hot reloads.
  if (window['ngRef']) {
    window['ngRef'].destroy();
  }
  window['ngRef'] = ref;
  // Otherise, log the boot error
}).catch(err => console.error(err));

标签： angulargoogle-chrome-extension