如何在内容脚本中引导角度应用程序

Question

我正在尝试在content-script中引导Angular应用程序，以便每当div可见时，Angular App都应该被引导。

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

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

AppModule

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