在使用了 npm 下载 Material 后, 项目不能正常使用 Material 组件, 随后又使用官方命令使用 Material 组件, 仍然不能正常使用 Material 组件.

npm 命令

npm install --save @angular/material

最后发现, 在执行上面相关命令后, Material 并没有完全自动执行下文  "二. 之后还将执行下面操作:", 随后手动执行 "二. ..." 相关操作, 组件正常运行.

官方网站:

首页 - Angular Material 组件库

使用官方推荐命令会比较好, 主要是官方推介命令会进行相应配套操作, 降低自己操作难度:

ng add @angular/material

一. 在运行上面命令后, 控制台会出现一些选项让开发者选择一些功能:

1. 选择组件的主题, 或者自定义主题(custom).    粗略理解就是页面主题颜色

2. 设置全局样式.

3. 设置浏览器动画.

二. 之后还将执行下面操作:

1. 将相关依赖库加入 package.json 文件中: 主要加入  @angular/material

2. 在 index.html 中添加字体和 icon 资源. 如下:



<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyAppMaterial</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  　　<link rel="icon" type="image/x-icon" href="favicon.ico">
　　<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
　　<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>


主要是在 <head> 内加入:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">




(上面资源都是从 google 相关网页下载, 如果网络不稳定会影响自己项目运行. 将上面链接中资源下载下来, 放到自己项目中, 就留着下篇讲吧)


3. 添加全局 css 样式.


  • 去掉 body 的边距
    • 

  • 为 html 和 body 设置 height: 100%
    • 

  • 把 Roboto 设置为默认的应用字体


angular.json




"styles": [

　　"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",

　　"src/styles.scss"

],




src/styles.scss




/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }

body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }




另外附带 package.json 供大家参考:


dependencies 中下面这两个版本保持一致:


"@angular/material": "^10.2.7",


"@angular/cdk": "^10.2.7",


还需要有


"@angular/animations": "~10.2.0",




{

  "name": "my-app-material",

  "version": "0.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve --port 80",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

  "private": true,

  "dependencies": {

    "@angular/animations": "~10.2.0",

    "@angular/cdk": "^10.2.7",

    "@angular/common": "~10.2.0",

    "@angular/compiler": "~10.2.0",

    "@angular/core": "~10.2.0",

    "@angular/forms": "~10.2.0",

    "@angular/material": "^10.2.7",

    "@angular/platform-browser": "~10.2.0",

    "@angular/platform-browser-dynamic": "~10.2.0",

    "@angular/router": "~10.2.0",

    "rxjs": "~6.6.0",

    "tslib": "^2.0.0",

    "zone.js": "~0.10.2"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "~0.1002.0",

    "@angular/cli": "~10.2.0",

    "@angular/compiler-cli": "~10.2.0",

    "@types/node": "^12.11.1",

    "@types/jasmine": "~3.5.0",

    "@types/jasminewd2": "~2.0.3",

    "codelyzer": "^6.0.0",

    "jasmine-core": "~3.6.0",

    "jasmine-spec-reporter": "~5.0.0",

    "karma": "~5.0.0",

    "karma-chrome-launcher": "~3.1.0",

    "karma-coverage-istanbul-reporter": "~3.0.2",

    "karma-jasmine": "~4.0.0",

    "karma-jasmine-html-reporter": "^1.5.0",

    "protractor": "~7.0.0",

    "ts-node": "~8.3.0",

    "tslint": "~6.1.0",

    "typescript": "~4.0.2"

  }

}




修改完 package.json 删除当前项目中的 node_modules 文件夹, 运行下面命令会自动下载项目所需依赖.




npm i




遇到另外的坑: 如果在非根模块(非 app.moudle.ts )运行 Material  组件报错或无法正常显示, 可以考虑将组件引入到根模块( app.moudle.ts )和需要用到的模块( use.module.ts )各一份试试看.
												


											
Angular 集成 Material UI 后组件显示不正常 踩坑日记的更多相关文章
	

    
						
  1. material UI中子组件样式修改的几种方案研究
		
      material UI是一个流行的与React配套的前端UI框架,对于开发者而言,熟悉它的样式修改方案是必要的.但目前相关资料并不直观,并且没有总结到一起.如果对相关特性不太清楚,开发者很可能会在 ...
    
		
    2. 
						
  2. vue父组件异步传递prop到子组件echarts画图问题踩坑总结
		
    效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...
    
		
    3. 
						
  3. vuepress搭建UI组件库文档踩坑篇
		
    为了实现组件效果预览及代码展示可折叠功能,使用了插件vuepress-plugin-demo-container 相关配置可参考官网说明文档 第一步 安装插件 npm i - D vuepress-p ...
    
		
    4. 
						
  4. 微信小程序Map组件踩坑日记
		
    刚刚又发生一个bug,搞得我头皮发麻,本来该美滋滋的回家准备度过愉快的周末,瞬间变成了日常修bug,来,开始填坑之路 情景再现: 首先说一说我们项目的需求, 点击下方,弹出抽屉 点击对应的地图打开相应 ...
    
		
    5. 
						
  5. 修改ranger ui的admin用户登录密码踩坑小记
		
    修改的ranger ui的admin用户登录密码时,需要在ranger的配置里把admin_password改成一样的,否则hdfs的namenode在使用admin时启动不起来,异常如下: Trac ...
    
		
    6. 
						
  6. 微信小程序踩坑日记2——实时访问数据库并渲染UI
		
    0. 引言 主要讲讲对于实时访问数据库并渲染UI我的解决方法. 一开始查到了随让小程序是单线程的,但是有一个基本上是封装的worker线程,相当于可以自己自定义(类似于Android开发里的handl ...
    
		
    7. 
						
  7. Laya 踩坑日记-人物模型穿模，模型显示不正常
		
    最近做游戏,人物要跑到很远的位置,z轴距离大概有20000个单位,然后就发现一个bug,到远处人物模型穿了,而且没办法改,这就尴尬了 Z轴对应值    0    100000 100000 当距离零点 ...
    
		
    8. 
						
  8. Laya 踩坑日记-BitmapFont 不显示空格
		
    项目中有用到艺术字,美术通过 bmfont64 将字体导给我了,结果发现在应用上 空格不显示 如图: 今天去深究了一下这个问题,发现是底层没封装好,然后自己改了一下下面是改过的 BitmapFont  ...
    
		
    9. 
						
  9. asp.net core 集成swagger ui
		
    什么是Swagger? 说swagger 之前,我们先说一下OpenApi 规范. OpenApi 是一种和语言无关的用于描述RESTAPIs 接口功能的一种规范,对RESTAPIs 接口的描述包括: ...
    
		
    10. 
						
  10. 集成 Kendo UI for Angular 2 控件
		
    伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Ang ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Github 组合搜索开源项目 (超详细)
			
    例如搜索 Spring Boot 相关项目  spring boot (最简单最常用) in:name spring boot (匹配项目名字)  in:name spring boot stars: ...
    
			
    2. 
						
  2. open与fopen的区别
			
    1. 来源 从来源的角度看,两者能很好的区分开,这也是两者最显而易见的区别: open是UNIX系统调用函数(包括LINUX等),返回的是文件描述符(File Descriptor),它是文件在文件描 ...
    
			
    3. 
						
  3. Java开发面试--群面专区
			
    目录 一.群面背景 二.群面流程 三.群面角色 四.群面细节 五.群面礼仪 六.群面话术 七.个人演讲 八.群面题型 群面也称无领导小组~ 候选人们被要求在一个相对自由的环境中展示他们的能力,并在没有 ...
    
			
    4. 
						
  4. React项目中webpack的配置过程
			
    初始化一个web项目 使用npm init -y 初始化一个项目 在项目目录下创建src, dist文件夹,创建webpack.config.js配置文件 然后在src文件夹下创建index.js,  ...
    
			
    5. 
						
  5. mybatis-plus使用心得
			
    mybatis-plus是一款基于mybatis的持久层框架,在mybatis上只做增强不做改变.基本使用流程: 导入依赖坐标: <dependency> <groupId>c ...
    
			
    6. 
						
  6. codeforce 827div4
			
    第一次在codeforce上打题,补一下题记录成长 D题 分析:求数组中两个互质的数的最大下标和: 思路:观察到数据范围n是2e5暴力做n^2会超时,再观察数据a[i]最大为1000,所以这2e5个数 ...
    
			
    7. 
						
  7. 线性dp数字三角形
			
    数字三角形是最裸的题目,没有加入任何的背景,这里就不写了. 下面这道摘花生的题目就是数字三角形的应用 Hello Kitty想摘点花生送给她喜欢的米老鼠. 她来到一片有网格状道路的矩形花生地(如下图) ...
    
			
    8. 
						
  8. html5学习内容-6（flex）
			
    弹性布局–flex (一)视口单位主要包括以下4个: vw:1vw等于视口宽度的1% vh:1vh等于视口高度的1% vmin:选取vm和vh中最小的那个 vmax:选取vm和vh中最大的那个 常用于 ...
    
			
    9. 
						
  9. Jail 【Python沙箱逃逸问题合集】
			
    借助NSS平台题目,以2022年HNCTF为例展开分析 背景: 由于目前很多赛事有时候会出现一些pyjail的题目,因此在这里总结一下以便以后遇见可以轻松应对. 注:由于Python3中的unicod ...
    
			
    10. 
						
  10. js做四则运算时，精度丢失问题及解决方法
			
    一.前言:这个问题可以说是程序员必踩的坑,因此网上针对该问题的分析有很多也很详细,解决方法也比较统一,写法也是大同小异,本以为预期效果真能如他们所说是完美的,然而效果却是差强人意. 二.问题:首先,先 ...
    
			
    11.