在主应用程序外部渲染Angular组件

Joa*_*rin 6 angular

我有一个角度应用程序,它有一个捆绑包和一个包含根选择器的HTML代码

<app></app> 
Run Code Online (Sandbox Code Playgroud)

引导应用程序的位置。

是否有可能以某种方式在该应用容器之外呈现该应用中的组件?在HTML中,类似

<component-name></component-name>
Run Code Online (Sandbox Code Playgroud)

这样做的原因是,此应用程序正在外部加载,以便仅一步一步地分析组件,而不是整个应用程序,这类似于该应用程序中组件的样式指南。因此,我加载了捆绑软件,并且希望能够仅渲染用户选择的组件。

rya*_*ain 9

只需将您需要的任何组件添加到bootstrap传递给 NgModule的数组中:

@NgModule({
  declarations: [AppComponent, ContactFormComponent],
  imports: [...],
  providers: [SharedService],
  bootstrap: [AppComponent, ContactFormComponent]
})
export class AppModule {}
Run Code Online (Sandbox Code Playgroud)

现在瞧,这有效:

<html><body>
  <app-contact-form></app-contact-form>
  ============================================
  <app-root></app-root>
</body></html>
Run Code Online (Sandbox Code Playgroud)

刚刚从上面链接的 Günter 答案中的 plunker 那里了解到这一点。很酷。用角 6 测试


Gün*_*uer 3

您可以引导多个元素。您可以注入共享服务,以便能够在不同 Angular2 应用程序的组件之间进行通信(在同一页面上)。

如何动态创建引导模式作为 Angular2 组件?