使用 angular5 迁移到 material 设计

Question

我正在使用 bootstrap 开发一个 angular4 应用程序。我刚搬到 angular5，我想知道是否不是使用 material 组件设计而不是 prime-ng ng-bootrap kendo-ui 等... 谢谢

Answer 1

在控制台中：

ng new pjt
cd pjt

npm install @angular/material @angular/cdk --save
npm install @angular/animations --save

创建 app/modules/material.module.ts 文件并包含：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material';

@NgModule({
imports: [MatButtonModule],
exports: [MatButtonModule],
})

export class MaterialModule { }

注意每个元素 Mat...您要使用的模块需要添加到上面的文件中，以逗号分隔到导入、导入和导出行。

更新 app/app.modules.ts 以包含

import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { MaterialModule } from './modules/material.module';
...
imports: [
...
BrowserAnimationsModule,
MaterialModule
],

更新 styles.scss 以包含

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

在控制台中

npm install hammerjs --save

更新 main.ts 以包含

import 'hammerjs';

更新 index.html 以包含

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

在控制台中

ng serve

然后您可以开始在组件中包含 material 元素，例如<button mat-button>Some Btn<button> ...查看 material.angular.io 中的元素 ...

然后查看 https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App 了解更多详情。

使用 angular5 迁移到 material 设计

migrating to material design with angular5

material-design

angular5