Question

我正在使用bootstrap开发一个angular4应用程序。我刚刚转到angular5，我想知道是不是使用材料设计的组件而不是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

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

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

使用angular5迁移到材料设计

1 个答案: