在使用了 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. 多线程指南：探究多线程在Node.js中的广泛应用
			
    前言 最初,JavaScript是用于设计执行简单的web任务的,比如表单验证.直到2009年,Node.js的创建者Ryan Dahl让开发人员认识到了通过JavaScript 进行后端开发已成为可 ...
    
			
    2. 
						
  2. 鬼谷子的钱袋（lgP2320）
			
    主要思路:二进制拆分. 先将 \(m\) 进行二进制拆分. 注意金币总数有限,也就是说拆分后可能会多出来一组.多出来的这组如果不是 \(2^n\) 就不需要考虑了,因为不会和前面的重复. 接下来考虑重 ...
    
			
    3. 
						
  3. 21.8 Python 使用BeautifulSoup库
			
    BeautifulSoup库用于从HTML或XML文件中提取数据.它可以自动将复杂的HTML文档转换为树形结构,并提供简单的方法来搜索文档中的节点,使得我们可以轻松地遍历和修改HTML文档的内容.广泛 ...
    
			
    4. 
						
  4. mysql 索引图
			
    
			
    5. 
						
  5. JUC并发编程学习笔记（三）生产者和消费者问题
			
    生产者和消费者问题 synchronized版-> wait/notify juc版->Lock 面试:单例模式.排序算法.生产者和消费者.死锁 生产者和消费者问题 Synchronize ...
    
			
    6. 
						
  6. SNN_SRM模型
			
    # SRM模型 ## 早期SRM模型 Spike Response Modul(SRM)模型将传统的LIF微分模型换成了一个关于输入.输出的脉冲函数,可以将脉冲神经网络简化为第二代神经网络. 基本公式 ...
    
			
    7. 
						
  7. 《流畅的Python》 读书笔记 第8章_对象引用、可变性和垃圾回收
			
    第8章_对象引用.可变性和垃圾回收 本章的主题是对象与对象名称之间的区别.名称不是对象,而是单独的东西 name = 'wuxianfeng' # name是对象名称 'wuxianfeng'是个st ...
    
			
    8. 
						
  8. 解密Prompt系列19. LLM Agent之数据分析领域的应用：Data-Copilot & InsightPilot
			
    在之前的 LLM Agent+DB 的章节我们已经谈论过如何使用大模型接入数据库并获取数据,这一章我们聊聊大模型代理在数据分析领域的应用.数据分析主要是指在获取数据之后的数据清洗,数据处理,数据建模, ...
    
			
    9. 
						
  9. base64编码的学习
			
    base64编码是什么 Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法. Base64编码本质上是一种将二进制数据转成 ...
    
			
    10. 
						
  10. Bash—source命令&export命令&bashrc文件
			
    当不使用 source 命令执行脚本时,会创建一个子 shell,在该子 shell 中执行完脚本后退出子 shell.不是用 export 定义的变量只对该 shell 有效,对子 shell 是无 ...
    
			
    11.