在带有母版页的 .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 78=] 应用程序，即单击 TabThree，我必须在现有 ASP.NET 网络应用程序中加载一个 angular 应用程序，类似于参考 link()

//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，On单击 TabThree 我尝试使用以下导航代码行之一将 angular 组件加载到 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

我提到了 link () 但这也没有解决问题，我无法在 BodyContent 中将 Angular 组件作为选项卡启动占位符。

我研究了两个参考文献 link，但它们没有关于 routing/navigation 如何加载 ASPX 页面中的 angular 组件的正确信息.

除了上面提到的，我已经尝试了其他方法，这些方法重定向整个页面并作为独立的启动 Angular 应用程序，但我的要求是将 angular 组件写入 TabThree.aspx 页面的正文内容，以便与其他 Tabs/pages 保持一致。

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

提前致谢！！

我没有找到任何可能的重复项，我也 link 编辑了参考资料，希望这没有被标记为重复项。

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);

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

Embedding an Angular app inside .net ASPX page with master page

asp.net

asp.net-mvc

angular

angular2-routing

angular4-router