在使用了 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. oracle-应用连接数激增测试
			
    在生产环境遇见过表的连接数过高,导致系统宕机的问题,操作上是由于在大表上建立索引,造成全表锁.故手动在表加表级锁,表上的应用不停,查看Oracle数据库连接数是否激增. 1 应用正常运行,查看当前数据 ...
    
			
    2. 
						
  2. 【matplotlib 实战】--面积图
			
    面积图,或称区域图,是一种随有序变量的变化,反映数值变化的统计图表. 面积图也可用于多个系列数据的比较.这时,面积图的外观看上去类似层叠的山脉,在错落有致的外形下表达数据的总量和趋势.面积图不仅可以清 ...
    
			
    3. 
						
  3. os --- 多种操作系统接口¶
			
    os.path --- 常用路径操作 源代码: Lib/posixpath.py (用于 POSIX) 和 Lib/ntpath.py (用于 Windows). 此模块实现了一些有用的路径名称相关函 ...
    
			
    4. 
						
  4. python接口自动化 之excel读取测试数据
			
    一.当你拥有一个excel版的接口用例 excel中有用例名称.url.请求方式和请求参数 二.获取excel的Url.请求方式和请求参数 # 单独获取某个单元格的值,第二行第二列# 第二行数据 ro ...
    
			
    5. 
						
  5. [ABC201D] Game in Momotetsu World 题解
			
    Game in Momotetsu World 题目大意 在一个 \(n\times m\) 的网格中,存在红色和蓝色两种格子,红色格子用 - 表示,蓝色格子用 + 表示. 现在 Takahashi  ...
    
			
    6. 
						
  6. Flex 布局项目实战，好像没那么难！
			
    在上篇文章别再用 float 布局了,flex 才是未来!中,我们聊到 Flex 布局才是目前主流的布局方式.在文章最后,我们还贴了一个案例,并且还浅浅地讲解了一下. 有些小伙伴说,这讲解得太粗了,要 ...
    
			
    7. 
						
  7. Go命令大全：全面解析与实践
			
    本文详尽地探讨了Go语言的内建命令集,包括但不限于go build.go run.go get等.文章首先列举了所有常用的Go命令,并用表格形式简洁地解释了它们的功能.随后,我们逐一深入讲解了每个命令 ...
    
			
    8. 
						
  8. postgresql 标量子查询改写的各种姿势
			
    同事提供一条SQL,原执行时间需要 3.6S ,反馈比较慢需要优化一下,废话不说贴SQL: 原SQL: select ((select count(1) FROM AAAAAAAAA wf join  ...
    
			
    9. 
						
  9. git如何使用？初始化仓库 提交代码
			
    首先 国内一般使用码云 注册码云 在ui界面创建仓库 一般只有一个readme 方法一: 第一步  git clone https://gitee.com/用户个性地址/HelloGitee.git  ...
    
			
    10. 
						
  10. 改变element dialog弹窗的关闭按钮样式
			
    .el-dialog__headerbtn { top: 8px !important; background: url('https://你路径资源的url图片') left no-repeat;  ...
    
			
    11.