Question

我的ASP.NET Web应用程序主页包含标题，标签， BodyContent （每个页面内容都在这里），页脚用户控件（页眉，标签，页脚）和页面内容（MainContent）的占位符。选项卡用户控件具有无序的选项卡列表，例如我们将选项卡的文本视为 TabOne ， TabTwo ， TabFour ，每个选项卡单击一下网页使用以下代码行的javascript函数加载：

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

现在我收到了一个新的请求，要添加一个标签 TabThree 来加载一个角度页面，显示标题，标签，页脚和保持角度应用内容的BodyContent，即点击 TabThree ，我要在现有的ASP.NET Web应用程序中加载角度应用程序，类似于引用链接（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>

如果我单独运行角度应用程序，它会使用 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组件作为Tab启动。

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

我尝试过上面提到的其他方法，它们重定向整个页面并将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);

在包含母版页

1 个答案: