如何在 asp.net core mvc 视图页面中使用角度多个模块？答案

【问题标题】：How to use angular multiple modules in asp.net core mvc view page?如何在 asp.net core mvc 视图页面中使用角度多个模块？
【发布时间】：2021-06-04 07:12:13
【问题描述】：

我最近一直在使用 Angular 编写一个使用 asp.net core mvc 的项目。在此视图的布局页面中使用时，我不能在视图中使用角度模块。如何将 Angular 与 Asp.net 核心应用程序混合？有什么解决办法吗？

【问题讨论】：

这能回答你的问题吗？ how to embed an angular app into another app?

标签： angular asp.net-core

【解决方案1】：

这正是我一直在寻找的，几天后我找到了解决方法：

首先，您需要使用延迟加载功能模块，看看这个示例以了解如何做到这一点：

https://stackblitz.com/edit/angular-ivy-78jh2g

使用上述示例在 Angular 中学习延迟加载后，您就可以按照以下步骤操作了：

根据上面的示例，我终于有了这样的app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'servicelearning',
    loadChildren: () =>
      import('./service-learning/service-learning.module').then((m) => m.ServiceLearningModule),
  },
  {
    path: 'sportzone',
    loadChildren: () =>
      import('./sportzone/sportzone.module').then((m) => m.SportzoneModule),
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full',
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [],
})
export class AppRoutingModule {}

然后在你的 MVC 应用程序中，你需要执行以下步骤：

*在这种情况下，我的 Angular 项目中有 2 个模块，一个是 ServiceLearning，另一个是 SportZone：

1- 在你的 index.cshtml 文件中添加：

@{
        ViewBag.Title = "Sport Zone";
    }
    
    @Styles.Render("~/Content/data-tables")
    
    <app-root class="bootstrap-plus">
        <div class="pad-top-p1 text-center">
            <i class="fa fa-spinner fa-spin"></i> Loading...
        </div>
    </app-root>
    
    @section scripts {
        <script>var __model = @Html.Raw(Json.Encode(Model));</script>
        @Scripts.Render("add your required scripts if you have any...")
    
        @if (Html.IsDebug())
        {
            <script src="/ng/dist/ng/runtime.js"></script>
            <script src="/ng/dist/ng/polyfills.js"></script>
            <script src="/ng/dist/ng/styles.js"></script>
            <script src="/ng/dist/ng/vendor.js"></script>
            <script src="/ng/dist/ng/main.js"></script>
        }
        else
        {
           <!--inject:scripts-->
            <script type="text/javascript" src="/scripts/sportzone/runtime-es2015.9855ea66eeb74731b37a.js" type="module"></script>
            <script type="text/javascript" src="/scripts/sportzone/runtime-es5.9855ea66eeb74731b37a.js" nomodule="" defer=""></script>
            <script type="text/javascript" src="/scripts/sportzone/polyfills-es5.049f620af8c864cf4d88.js" nomodule="" defer=""></script>
            <script type="text/javascript" src="/scripts/sportzone/polyfills-es2015.f2c5ab749249a66bdf26.js" type="module"></script>
            <script type="text/javascript" src="/scripts/sportzone/styles-es2015.50350f29240d2b9dec57.js" type="module"></script>
            <script type="text/javascript" src="/scripts/sportzone/styles-es5.50350f29240d2b9dec57.js" nomodule="" defer=""></script>
            <script type="text/javascript" src="/scripts/sportzone/main-es2015.77ae667b15db80594508.js" type="module"></script>
            <script type="text/javascript" src="/scripts/sportzone/main-es5.77ae667b15db80594508.js" nomodule="" defer=""></script>
            <!--endinject-->
        }
    }

2-在_Layout.chtml中添加：

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewBag.Title</title>
            
        @{
            bool isNgSportZone = (HttpContext.Current.Request.RawUrl.IndexOf("/sportzone", StringComparison.InvariantCultureIgnoreCase) != -1);
            bool isNgServiceLearning = (HttpContext.Current.Request.RawUrl.IndexOf("/servicelearning", StringComparison.InvariantCultureIgnoreCase) != -1);
        }
        @if (isNgSportZone)
        {
            <script>document.write('<base href="/sportzone" />');</script>
        }
        @if (isNgServiceLearning)
        {
            <script>document.write('<base href="/servicelearning" />');</script>
        }
    </head>

你就完成了！

从现在开始，如果你输入这个地址 http://localhost/servicelearning 它将重定向到“servicelearning”模块如果你输入这个地址 http://localhost/sportzone 它会重定向到 sportzone。

希望对您有所帮助，如果有任何问题，请在此发帖。

【讨论】：