在主应用程序之外渲染 Angular 组件答案

【问题标题】：Render Angular component outside the main app在主应用程序之外渲染 Angular 组件
【发布时间】：2016-11-26 08:15:35
【问题描述】：

我有一个 Angular 应用程序，它有一个包和一段包含根选择器的 HTML

<app></app>

应用程序的引导位置。

是否有可能以某种方式从该应用程序容器外部呈现该应用程序的组件？在 HTML 中，有类似

的内容

<component-name></component-name>

这样做的原因是这个应用程序是从外部加载的，只是为了逐个分析组件，而不是整个应用程序，有点像应用程序中组件的样式指南。所以我加载了包，我希望能够只呈现用户选择的组件。

【问题讨论】：

标签： angular

【解决方案1】：

只需将您需要的任何组件添加到传递给 NgModule 的 bootstrap 数组即可：

@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 中的 plunker 学到了这一点。很酷。用角度 6 测试

【讨论】：

感谢您为我困扰了几个小时的问题提供了一个优雅的解决方案！
如果您有不同的索引页面，例如在asp mvc应用程序中，不同的页面在一个布局页面中呈现，请参阅stackoverflow.com/questions/57916774/…

【解决方案2】：

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

How to dynamically create bootstrap modals as Angular2 components?

【讨论】：

我不控制原始应用程序。所以我不知道这是否是我的用例..我所做的是我将一个捆绑包加载到我的应用程序（angular2 应用程序）中，并且我拥有用户想要查看的组件的信息（他自己的组件，包括组件名称选择器和 typedoc 生成的组件信息）。有了这些信息，我想将他的包加载到 iframe 中并渲染他也想看到的组件。这是动态的，这意味着它应该根据他想要看到的内容来渲染不同的组件..
抱歉，不知道具体是什么意思。如果您的意思是这样，您就不需要共享服务。
您好，冈特，感谢您的帮助！可能我解释的不是很清楚。所以我正在构建一个 webpack 工具和一些 react fokes（他们已经为 react 构建了它，我正在为 angular2 进行原型设计）分析任何给定应用程序的组件，并让您根据组件的输入查看不同版本的组件有例如，你有一个卡片组件，它有一个名称和一个图像，它可以让你通过切换输入来查看带有大名称、小名称、亮图像、暗图像等的卡片。就像组件的动态样式指南一样工作。
它的工作原理是从组件中获取源代码并分析其源代码，在这种情况下，我使用 typedoc 对其进行解析以获得组件及其所有输入等的良好指纹等。我的最初的方法是使用动态组件加载器，它一直在工作，但是当组件依赖于其他组件时，它变得越来越复杂，因为有时我（作为插件）并非所有这些信息都可用。
他们正在做的事情以及我正在考虑遵循相同路径的方式是：如果我们只是将用户的捆绑包放在 iframe 中并在那里渲染组件会怎样？这样可以缓解任何问题，因为捆绑包可能包含您需要的任何插件作为插件，您只需将组件放入，传递您想要的任何输入，它就会工作。它比动态组件加载要简单得多，但在 Angular 中，应用程序会在特定元素上引导，并且您不能只在其中动态打印任何组件，因为捆绑包将寻找要引导的特定元素..