在使用了 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. LeetCode 周赛上分之旅 #47 前后缀分解结合单调栈的贡献问题
			
    ️ 本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问. 学习数据结构与算法的关键在于掌握问题背后的算法思维框架,你的思考越 ...
    
			
    2. 
						
  2. 利用SPI实现全自动化——LCD屏与RGB灯
			
    如果你开启了广告屏蔽,请将博客园加入白名单,帮助博客园渡过难关,谢谢! 前言 在21年做物理实验和23年客串电赛之后,我带着STM32重回电子DIY界.这次的项目是一个电池供电的补光灯,由于用途更偏向 ...
    
			
    3. 
						
  3. Django框架项目之搜索功能——搜索导航栏、搜索后台接口、搜索页面
			
    文章目录 1-搜索导航栏 Header搜索组件:选择性CV router/index.js Header.vue 2-搜索后台接口 路由:course/urls.py 视图:course/views. ...
    
			
    4. 
						
  4. VideoCapture
			
    from xgoedu import XGOEDU import time #实例化edu XGO_edu = XGOEDU() XGO_edu.lcd_text(50,50,'hello',colo ...
    
			
    5. 
						
  5. scnhealthcheck
			
    在CPU补丁中,Oracle提供了一个脚本 scnhealthcheck.sql 用于检查数据库当前SCN的剩余情况.该脚本的算法和以上描述相同,最终将最大合理SCN 减去当前数据库SCN,计算得出一 ...
    
			
    6. 
						
  6. js  实现文件下载/文件导出。
			
    1. POST方式进行文件导出: // url 下载URL // fileName 下载文件名称 function exportFile(url, fileName) { let xhr = new  ...
    
			
    7. 
						
  7. Redis7
			
    Redis是基于内存的K-V键值对内存数据库 浅谈Redis7新特性 主要是自身底层性能和资源利用率上的提高和优化. 多AOF文件支持 config命令增强 限制客户端内存使用 listpack紧凑列 ...
    
			
    8. 
						
  8. Filter入门实例
			
    一.介绍 Filter:Filter是Servlet的"加强版",它主要用于对用户请求进行预处理,也可对HttpServletResponse进行后处理,是个典型的"处理 ...
    
			
    9. 
						
  9. 创造力的起源《The Origins of Creativity》
			
    接近创造力 创造力是对原创的追求,其动力是人类对于新奇事物的钟爱. 了解创造力需要三个层次的思考. 1.What(如何定义这种现象) 2.Question(发问,他是如何出现的,导致其出现的最初原因是 ...
    
			
    10. 
						
  10. Java基础知识（纯干货）
			
    基础篇 IDEA 开发 Java项目 卸载JDK 删除Java的安装目录 删除JAVA_HOME 删除path下关于java的目录 java -version 安装JDK17 下载链接:https:/ ...
    
			
    11.