在 ASP.NET Core Angular SPA 模板中添加 Angular Material

如果您不熟悉 ASP.NET Core SpaServices，请查看此存储库

• https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices

许多 SPA 模板（Angular、React、Vue、Aurelia 等）在此 repo 中可用，它们使用 NodeServices 进行服务器端渲染。 我们将使用 AngularSpa 模板并在其中添加 Angular Material。

要通过 yeoman 安装 Spa 模板，请首先使用以下命令安装模板生成器

npm install -g generator-aspnetcore-spa@next

创建一个目录，您将在其中使用 yeoman 初始化模板。 在您创建的目录的根目录下运行此命令

yo aspnetcore-spa

要安装 Angular Material，请运行以下命令

npm install --save @angular/material

安装完成后，您必须将包 (@angular/material) 名称包含在 *webpack.config.vendor.js* 文件的 vendor 部分。 此外，您必须添加一个默认的 Angular Material 预构建主题，以消除浏览器控制台中不需要的警告消息。 通过添加以下两行来修改 vendor 部分

"@angular/material",
"@angular/material/prebuilt-themes/deeppurple-amber.css"

注意：我正在使用 deeppurple-amber 主题。 @angular/material/prebuilt-themes 目录中还有另外三个主题可用。 使用您喜欢的一个。

现在，您必须运行 webpack 并传入 vendor 脚本 (webpack.config.vendor.js) 作为配置标志 (--config)。 运行以下命令

webpack --config webpack.config.vendor.js

您就可以开始了。 运行应用程序，您应该**_不会_**遇到任何问题。

让我们看看如何在 *counter.component.html* 文件中添加 md-button。 为此，首先您必须从 @angular/material 包中添加 MdButtonModule。 打开 *app.module.client.ts*； 导入 MdButtonModule 并将其添加到 imports 数组，如下所示

/* Other import statements */
import { MdButtonModule } from '@angular/material';

@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        /* Other import modules */
        MdButtonModule
    ],
    providers: [
        { provide: 'ORIGIN_URL', useValue: location.origin }
    ]
})
export class AppModule { }

快完成了！ 现在打开 ClientApp/app/counter 下的 *counter.component.html* 并将计数器按钮语法更改为以下内容

<button md-raised-button (click)="incrementCounter()">Increment</button>

如果您在调试过程中进行了这些更改，那么项目将使用 webpack 的 **热模块替换** 功能自动推送更改，您将在浏览器窗口中看到类似这样的内容

奖励：添加动画模块

很多人在处理 @angular/animation 模块时遇到问题，这就是您如何在 Increment 按钮上应用 hover 动画的方法

导入动画模块 (BrowserAnimationsModule) 并将其添加到 imports 数组。 将其添加到 *app.module.client.ts* 文件中。

/* Other import statements */
import { MdButtonModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        /* Other importes modules */
        MdButtonModule,
        BrowserAnimationsModule
    ],
    providers: [
        { provide: 'ORIGIN_URL', useValue: location.origin }
    ]
})
export class AppModule { }

注意：如果您偶然将 @angular/platform-browser/animations 模块添加到 app.module.server.ts 中，您将收到此 501 错误消息

这是因为您正在使用**服务器端渲染** (SSR)，并且在服务器端，**Angular Universal** 不允许您访问浏览器的 document 对象。

现在您已经包含了动画模块，让我们在 *counter.component.ts* 中使用它，如下所示

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
    selector: 'counter',
    templateUrl: './counter.component.html',
    styles: [`
        .myButton {
            background-color: purple;
            color: white;
        }

        .myButton:hover {
            background-color: orange;
            color: white;
        }
    `],
    animations: [
        trigger('hoverAnimation', [
            transition(':enter', [   // :enter is alias to 'void => *'
                style({ opacity: 0 }),
                animate(250, style({ opacity: 1 }))
            ]),
            transition(':leave', [   // :leave is alias to '* => void'
                animate(100, style({ opacity: 0 }))
            ])
        ])
    ]
})
export class CounterComponent {
    public currentCount = 0;

    public incrementCounter() {
        this.currentCount++;
    }
}

将 .myButton 类和 hoverAnimation 属性添加到 Increment 按钮，如下所示

<button md-raised-button class="myButton" (click)="incrementCounter()" 
[@hoverAnimation]>Increment</button>

你完成了！ 运行应用程序，您应该在按钮上获得一些悬停动画，如下所示

示例存储库链接

• https://github.com/fiyazbinhasan/AspNetCoreAngularSPAMaterial