使用 ajax.load() 加载 Angular 6 index.html 模板答案

【问题标题】：using ajax.load() to load Angular 6 index.html template使用 ajax.load() 加载 Angular 6 index.html 模板
【发布时间】：2018-08-17 19:45:01
【问题描述】：

在 ASP.net 视图中，当单击某个链接或按钮时，它需要在模态 DIV 中加载 Angular 5 或 6 应用程序，而不是框架。这类似于使用 MVC 控制器返回部分视图。我不想发布到控制器操作，而是使用 ajax.load('theAngularIndexHtml',{username:"aUsername" station:"aLocation" sta3n:"648" patientSID:"anId" patientIEN:"anIEN" patientName:" aPatientName" patientSSN4:"unknown" noteTitle:"Treatment Candidacy Note">}) 一起绕过了控制器。这可能吗？如果是，如何将参数值设置为 Angular app-root 组件的属性。我是否需要删除 html 模板中的所有内容，但 app-root 除外？ Angular 需要在头部有一个基本标签，如何处理呢？这是 Angular 的 index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Treatment Candidacy Note</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root userName="aUsername" station="aLocation" sta3n="648" patientSID="anId" patientIEN="anIEN" patientName="aPatientName" patientSSN4="unknown" noteTitle="Treatment Candidacy Note">
  </app-root>
</body>

</html>

【问题讨论】：

标签： jquery asp.net-mvc angular

【解决方案1】：

更好的解决方案是 Single SPA Framework，它可以帮助您引导任何流行的框架，例如 Angular、Angular JS、React Vue，并在没有 IFrame 的情况下安装到 div。您必须根据您正在使用的框架进行一些注册，在您的情况下，它将 single-spa-angular 引导您的应用程序。如果没有 boostrap angular ，组件将不会执行。

https://single-spa.js.org/docs/getting-started-overview.html

https://github.com/CanopyTax/single-spa-angular

https://medium.com/canopy-tax/a-step-by-step-guide-to-single-spa-abbbcb1bedc6

对于传递价值的通信，您可以创建自己的事件/订阅机制，也可以使用 redux 或其他一些库。在他们的 github 中，他们已经对此进行了解释。

现场演示

https://single-spa.surge.sh/

【讨论】：