在使用了 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. 服务链路追踪 —— SpringCloud Sleuth
			
    Sleuth 简介 随着业务的发展,系统规模变得越来越大,微服务拆分越来越细,各微服务间的调用关系也越来越复杂.客户端请求在后端系统中会经过多个不同的微服务调用来协同产生最后的请求结果,几平每一个请求 ...
    
			
    2. 
						
  2. linux常用命令（六）
			
    用于查找系统文件的相关命令 grep find locate grep:查找文件中符号条件的字符串(关键词) 命令语法:grep [选项] 查找模式 [文件名] 选项 选项含义 -E 模式是一个可扩展 ...
    
			
    3. 
						
  3. Android应用中对于微信分享的实例及问题
			
    源码地址 如何分享 分享无相应 分享结果如何接收响应 微信 分享回调 (提示几点关键问题:   debug_key 一定要获得对应的签名码 然后和weixin官网的appid对应     ) 几点注意 ...
    
			
    4. 
						
  4. Installing Gradle
			
    Chapter 4. Installing Gradle 4.1. Prerequisites Gradle requires a Java JDK or JRE to be installed, v ...
    
			
    5. 
						
  5. Android Tools Project Site
			
    Android Tools Project Site Search this site   Projects Overview Screenshots Release Status Roadmap D ...
    
			
    6. 
						
  6. nginx中一个请求匹配到多个location时的优先级问题，马失前蹄了
			
    背景 为什么讲这么小的一个问题呢?因为今天在进行系统上线的时候遇到了这个问题. 这次的上线动作还是比较大的,由于组织架构拆分,某个接入层服务需要在两个部门各自独立部署,以避免频繁的跨部门沟通,提升该接 ...
    
			
    7. 
						
  7. Telegram 正式引入国产小程序技术
			
    Telegram 宣布为其开发者提供了一项"能够在 App 中运行迷你应用"的新功能( 迷你应用即 Mini App,下文中以"小程序"代替). 在一篇博客文章 ...
    
			
    8. 
						
  8. Gitlab仓库代码更新时Jenkins自动构建
			
    环境说明 1.Jenkins和gitlab已经都已经安装完毕 2.Jenkins能连接到gitlab获取项目并能手动创建项目 3.Jenkins和gitlab能相互访问的到(gitlab要能连接到Je ...
    
			
    9. 
						
  9. 模拟退火算法（SA）
			
    求某个目标函数的最值 爬山法 首先我们通过爬山法来引出模拟退火算法 我们先看一个例子:求函数的最值 我们用爬山法解决这个问题的步骤 1.在解空间中随机生成一个初始解(图中小黄点就是我们生成的初始解)  ...
    
			
    10. 
						
  10. ensp小实验——浮动路由
			
    依靠优先级来保证多路径的连通性. #AR1中<Huawei>u t m<Huawei>sys[Huawei]sys r1[r1]int g0/0/1 [r1-GigabitEt ...
    
			
    11.