在主应用程序外部渲染Angular组件 [英] Render Angular component outside the main app
问题描述
我有一个角度应用程序，它有一个捆绑包和一块包含根选择器的HTML
I have an angular app, it has a bundle and a piece of HTML that contains a root selector
<app></app>
引导应用程序的位置.
是否有可能以某种方式在该应用容器之外呈现该应用中的组件?在HTML中，类似
Is it possible to somehow render a component from that app outside this app container? In the HTML, having something like
<component-name></component-name>
之所以这样做，是因为此应用程序是从外部加载的，以便仅一步一步地分析组件，而不是整个应用程序，这类似于该应用程序中组件的样式指南.因此，我加载了捆绑包，希望只渲染用户选择的组件.
The reason for this is this app is being loaded externally for analysing only components one by one, and not the app as a whole, sort of like a style guide for the components in the app. So I load the bundle and I want to be able to render only a component that the user chooses.
推荐答案
只需将所需的任何组件添加到传递到NgModule的bootstrap数组中即可:
Just add any components you need to the bootstrap array that is passed to NgModule:
@NgModule({
declarations: [AppComponent, ContactFormComponent],
imports: [...],
providers: [SharedService],
bootstrap: [AppComponent, ContactFormComponent]
})
export class AppModule {}
现在可以这样工作:
<html><body>
<app-contact-form></app-contact-form>
============================================
<app-root></app-root>
</body></html>
只需从上面链接的Günter的from夫中学到这一点.很酷.经过角度6的测试
Just learned this from the plunker in the answer Günter linked above. very cool. tested with angular 6
这篇关于在主应用程序外部渲染Angular组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
