Question

在ASP.net视图中，单击某些链接或按钮时，需要以模式DIV（而不是框架）加载Angular 5或6应用程序。这类似于使用MVC控制器返回部分视图。而不是发布到控制器操作，我想使用ajax.load（'theAngularIndexHtml'，{username：“ aUsername” station：“ aLocation” sta3n：“ 648” PatientSID：“ anId” PatientIEN：“ anIEN” PatientName：“ aPatientName“ PatientSSN4：“未知” noteTitle：“治疗候选资格说明”}}）一起绕过控制器。这可能吗？如果是，如何将参数值设置为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>

Answer 1

一个更好的解决方案是Single SPA Framework，它可以帮助您引导任何流行的框架（例如Angular，Angular JS，React Vue）并在没有IFrame的情况下安装到div中。您必须根据所使用的框架进行一些注册，对于您来说，它会单个spa-角度来引导您的应用程序。如果没有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/

使用ajax.load（）加载Angular 6 index.html模板

1 个答案: