在带有母版页的 .net ASPX 页面中嵌入 Angular 应用程序

Question

我有一个 ASP.NET Web 应用程序，其母版页包含 header、tabs、BodyContent（每个页面内容都放在这里） , footer 占位符，用于用户控件（页眉、选项卡、页脚）和页面内容 (MainContent)。 Tabs 用户控件有标签的无序列表，例如让我们考虑 Tab 的文本为 TabOne、TabTwo、TabFour，每个标签分别单击一次网页借助以下代码行加载一个 javascript 函数：

window.location.href = "TabOne.aspx";

现在我收到了一个新请求，要求添加一个标签 TabThree 来加载一个角页面，该页面显示页眉、标签、页脚和包含 Angular 应用程序内容的 BodyContent，即点击 TabThree ，我必须在现有的 ASP.NET Web 应用程序中加载一个 Angular 应用程序，类似于参考链接（How to include external Angular 2 app in ASP.NET Webforms aspx page）

//TabThree.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Base.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Programs.Default" %>

<%@ MasterType VirtualPath="~/Base.Master" %>


<asp:Content ID="Header" ContentPlaceHolderID="Header" runat="server">
<%--<base href="/AngularComponents/">--%> //No difference with uncommenting the base href
<%--<base href="/">--%>
    <script type="text/javascript" src="../Tabs.js"></script>
</asp:Content>
<asp:Content ID="Tab" ContentPlaceHolderID="Tab" runat="server">
</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="BodyContent"   runat="server">

<div id="pageContent">
   <app-root>Loading...</app-root>
   <script type="text/javascript" src="AngularModules/inline.bundle.js"></script>
   <script type="text/javascript" src="AngularModules/main.bundle.js"></script>
   <script type="text/javascript" src="AngularModules/polyfills.bundle.js"></script>
   <script type="text/javascript" src="AngularModules/vendor.bundle.js"></script>
   <link href="AngularModules/styles.bundle.css" rel="stylesheet" />
 </div> 
</asp:Content>
<asp:Content ID="Footer" ContentPlaceHolderID="Footer" runat="server">
</asp:Content>

如果我独立运行 Angular 应用程序，它会使用 ng serve -o 命令正常启动，并且在 URL (http://localhost:4200/#/TabThree?id=TID100) 上运行良好。现在我已将 dist 文件夹复制到 ASP.NET Web 应用程序工作区并将其重命名为 AngularModules，单击 TabThree 我已经尝试使用以下导航代码行之一将角度组件加载到 Bodycontent 中：

window.location.href = "TabThree.aspx/#/TabThree?ID=TID100";

window.location.href = "TabThree.aspx?AngularComponents/#/TabThree?ID=TID100";

Head 内容加载正常，但应该加载 TabThree 的 Angular 组件的 Bodycontent 为空白，控制台错误记录如下：

ERROR Sys.ParameterCountException: Sys.ParameterCountException: Parameter count mismatch.
"ERROR"
{
  [functions]: ,
  __ proto __: { },
  __zone_symbol__currentTask: { },
  description: "Sys.ParameterCountException: Parameter count mismatch.",
  message: "Sys.ParameterCountException: Parameter count mismatch.",
  name: "Sys.ParameterCountException",
  stack: "Sys.ParameterCountException: Sys.ParameterCountException: Parameter count mismatch.
  at String$startsWith (http://localhost:62557/ScriptResource.axd?

  d=gb2H0hcR0_2oXWpLxJmdTg2S_j-8tZAZO1r6sTjByVD4-_6_cs99E6CayZY9pi0-N-ip5bmZNlhZWaB-IG2xnFZG-NKKnY8LqkMvfx1uzDhC1zqaP8PQi4JB24Hq7urD6rwOMv6ZCQbxzc19pQ0mcl6iexnSPre_a0zN-jpBGmFTlZ5rxoZ47qCy4shfjh4T0&t=ffffffff87bbe9c7:494:12)
  at startsWith 

我引用了链接 (Including an Angular2 application to Asp.Net Webforms Page)，但这也没有解决问题，我无法在 BodyContent 占位符中将 Angular 组件作为选项卡启动。

我已经研究了这两个参考链接，但它们没有关于如何在 ASPX 页面中加载 angular 组件的路由/导航的正确信息。

除了上面提到的以外，我尝试了其他方法来重定向整个页面并将 Angular 应用程序作为独立应用程序启动，但我的要求是将 Angular 组件写入 TabThree 的 Bodycontent 中。 aspx 页面，因此它将与其他选项卡/页面保持一致。

在混合应用程序中解决此路由问题的任何帮助将是一个很大的帮助，我将不胜感激。

提前致谢！！

我没有找到任何可能的重复，我也链接了参考，希望这不会被标记为重复。

Answer 1

我已经在 aspx 页面中借助 IFrame 进行了修复。

//TabThree.aspx

<div id="dvngComponent" runat="server"></div>

//TabThree.aspx.cs

string url = "AngularComponents/#/TabThree?ID=TID100";

HtmlGenericControl ngComponent = new HtmlGenericControl("iframe");
ngComponent.Attributes.Add("id", "frmNgComponent");
ngComponent.Attributes.Add("src", url);
ngComponent.Attributes.Add("allowtransparency", "true");
ngComponent.Attributes.Add("frameBorder", "0");
ngComponent.Style["margin"] = "0 0 0 0";
ngComponent.Style["width"] = "100%";
ngComponent.Attributes.Add("height", "300px");
dvngComponent.Controls.Add(ngComponent);