1.资源文件准备
<link rel="stylesheet" href="../node_modules/angular-material/angular-material.css">
<script src="../node_modules/angular/angular.js"></script>
<script src="../node_modules/angular-animate/angular-animate.js"></script>
<script src="../node_modules/angular-aria/angular-aria.js"></script>
<script src="../node_modules/angular-material/angular-material.js"></script>
2.整理代码如下
<section layout="column" layout-align="start center">
<h1>1.md常用按钮(可选点击自带墨水波纹的按钮)</h1>
<div style="outline: dashed #009ddc">
<md-button layout-fill>平铺按钮</md-button>
<md-button>默认按钮</md-button>
<md-button class="md-primary">主要按钮</md-button>
<md-button class="md-accent">强调按钮</md-button>
<md-button class="md-warn">警告按钮</md-button>
<!--凸起浮雕效果-->
<md-button class="md-raised">凸起按钮</md-button>
<md-button class="md-accent md-raised">组合使用按钮</md-button>
<md-button class="md-no-focus">无风格按钮</md-button>
<md-button ng-disabled="true">禁用按钮</md-button>
<h1>2.图标文字按钮</h1>
<div style="outline: dotted #009ddc">
<md-button><md-icon md-svg-src="../img/gen.svg"></md-icon>默认按钮</md-button>
<md-button class="md-raised"><md-icon md-svg-src="../img/Android.svg"></md-icon>凸起按钮</md-button>
<md-button class="md-primary"><md-icon md-svg-src="../img/cake-tall.svg"></md-icon>主要按钮</md-button>
<md-button class="md-accent"><md-icon md-svg-src="../img/gen.svg">123</md-icon>警告按钮</md-button>
<h1>3.圆形图标按钮</h1>
<div style="outline: double #009ddc">
<md-button class="md-fab" aria-label="fab"><md-icon md-svg-src="../img/Android.svg"></md-icon></md-button>
<md-button class="md-fab md-warn" aria-label="fab"><md-icon md-svg-src="../img/Android.svg"></md-icon></md-button>
<md-button class="md-fab md-primary" aria-label="fab"><md-icon md-svg-src="../img/Android.svg"></md-icon></md-button>
<md-button class="md-fab" ng-disabled="true" aria-label="fab"><md-icon md-svg-src="../img/Android.svg"></md-icon></md-button>
<md-button class="md-fab md-mini" aria-label="mini"><md-icon md-svg-src="../img/people.svg"></md-icon></md-button>
<md-button class="md-fab md-mini md-primary" aria-label="mini"><md-icon md-svg-src="../img/people.svg"></md-icon></md-button>
<h1>4.图标按钮</h1>
<div style="outline:ridge #009ddc">
<md-button class="md-icon-button" aria-label="自定义按钮"><md-icon md-svg-icon="../img/cake-tall.svg"></md-icon></md-button>
<md-button class="md-icon-button md-warn" aria-label="自定义按钮"><md-icon md-svg-icon="../img/gen.svg"></md-icon></md-button>
<md-button class="md-icon-button md-primary" aria-label="自定义按钮"><md-icon md-svg-icon="../img/people.svg"></md-icon></md-button>
<md-button class="md-icon-button" ng-disabled="true" aria-label="自定义按钮"><md-icon md-svg-icon="../img/Android.svg"></md-icon></md-button>
<h1>5.自定义小按钮</h1>
<style>
.custom-btn-sm{
min-height: 2rem;
height: 2rem;
line-height: 2rem;
padding: 0 4px;
font-size:12px;
min-width: 40px;
.md-button.custom-btn-bgcolor{
background-color: #009ddc;
color:#fff;
.md-button.custom-btn-bgcolor:not([disabled]):hover{
background-color: #ccc;
/* color:#009ddc; */
</style>
<div style="outline:groove #009ddc">
<md-button class="md-primary md-raised custom-btn-sm">主要按钮</md-button>
<md-button class="md-warn md-raised custom-btn-sm">警告按钮</md-button>
<md-button class="md-accent md-raised custom-btn-sm">强调按钮</md-button>
<md-button class="md-raised custom-btn-sm custom-btn-bgcolor">自定义背景色按钮</md-button>
<md-button class="md-fab md-mini custom-btn-sm custom-btn-bgcolor"><md-icon md-svg-icon="../img/Android.svg"></md-icon></md-button>
</section>
3.效果图如下
1.资源文件准备 &lt;link rel="stylesheet" href="../node_modules/angular-material/angular-material.css"&gt; &lt;script src="../node_modules/angular/angular.js"&gt;&lt;/script&gt; &lt;script src=&
https://
mat
e
ria
l.
angular
js.org/latest/api/directive/
md
Button
https://
mat
e
ria
l.
angular
js.org/latest/demo/
button
FABFAB是浮起来的
Button
<
md
-
button
class="
md
-fab" a
ria
-label="FAB">
<
md
-icon class
import { NgModule } from '@
angular
/core';
import { CommonModule } from '@
angular
/common';
import {
Md
SidenavModule,
Md
ToolbarModule,
Md
IconModule,
Md
B...
@Injectable()
export class AuthService {
constructor(public jwtHelper: JwtHelperService) {}
public isAuthenticated(): boolean {
const token = localStorage.getItem('access_token');
return !this.jwtHelper.isTokenExpired(token);
在上面的示例中，我们在AuthService中注入了JwtHelperService服务。然后，我们使用`isAuthenticated`方法来检查`access_token`是否有效。
