如何在ASP.NET Core MVC Web应用中集成Angular组件？

这种方案完全可行，以下是具体落地步骤，可直接复用在所有通用组件上：

一、前置准备 #

• 安装Node.js与Angular CLI：执行npm install -g @angular/cli完成全局安装
• 打开ASP.NET Core MVC项目，在根目录下创建Angular子项目：运行ng new angular-components --standalone false（路由选"否"，样式选CSS即可）

二、配置Angular项目生成可嵌入组件 #

1. 修改Angular项目的angular.json，将编译输出路径指向ASP.NET Core的静态文件目录：

   "outputPath": "../wwwroot/angular-dist",
   

2. 创建按钮组件：执行ng generate component button，然后在button.component.ts中定义输入输出属性：

   import { Component, Input, Output, EventEmitter } from '@angular/core';
   
   @Component({
     selector: 'app-button',
     templateUrl: './button.component.html',
     styleUrls: ['./button.component.css']
   })
   export class ButtonComponent {
     @Input() label!: string;
     @Output() clickEvent = new EventEmitter<void>();
   
     onButtonClick() {
       this.clickEvent.emit();
     }
   }
   

3. 编写按钮组件模板button.component.html：

   <button class="common-btn" (click)="onButtonClick()">{{ label }}</button>
   

4. 配置Angular模块app.module.ts，声明并导出组件，同时取消默认的根组件启动：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { ButtonComponent } from './button/button.component';
   
   @NgModule({
     declarations: [ButtonComponent],
     imports: [BrowserModule],
     exports: [ButtonComponent],
     bootstrap: []
   })
   export class AppModule { }
   

5. 编译Angular组件：执行ng build --prod，编译产物会自动输出到ASP.NET Core的wwwroot/angular-dist目录

三、在ASP.NET Core MVC页面中使用Angular组件 #

1. 在MVC布局页（如_Layout.cshtml）中引入Angular运行时文件：

   <script src="~/angular-dist/runtime.js"></script>
   <script src="~/angular-dist/polyfills.js"></script>
   <script src="~/angular-dist/main.js"></script>
   <link rel="stylesheet" href="~/angular-dist/styles.css">
   

2. 在目标视图（如Index.cshtml）中直接使用组件标签，并初始化Angular模块：

   <app-button [label]="'提交表单'" (clickEvent)="handleBtnClick()"></app-button>
   
   <script>
     document.addEventListener('DOMContentLoaded', () => {
       platformBrowserDynamic().bootstrapModule(AppModule)
         .catch(err => console.error(err));
     });
   
     // 定义组件触发的事件处理逻辑
     function handleBtnClick() {
       alert('按钮已触发点击事件');
     }
   </script>
   

3. 若需从MVC模型动态传递数据，可直接用Razor语法绑定：

   <app-button [label]="'@Model.ButtonText'" (clickEvent)="handleBtnClick()"></app-button>
   

四、扩展到其他通用组件的通用流程 #

• 按按钮组件的创建流程生成新组件：定义@Input接收外部数据、@Output向外触发事件
• 在AppModule中声明并导出新组件
• 重新编译Angular项目更新静态文件
• 在MVC视图中直接使用组件标签，绑定属性与事件即可

注意事项 #

• 修改Angular组件后需重新执行ng build --prod更新静态文件，开发阶段可使用ng build --watch实时编译
• 确保ASP.NET Core项目已启用静态文件中间件（默认Program.cs中已配置app.UseStaticFiles()）

内容的提问来源于stack exchange，提问作者Marko Marc