ionic4如何新建一个图标并实现简单的路由跳转

第一个ionic4开发任务!

 

很激动这篇博客是记录笔者开发ionic4之后接到的第一个任务。简单说下项目需求，在下图的红框中新建一个图标，名为班课，并能实现单击这个图标后，跳转到下一个页面。

 

 

找图片

 

1.我们首先看下上图中其他图标都是什么格式的，嗯svg，所以我们也应该去找svg格式的图标

 

 

2.我们在阿里巴巴矢量图标库上找找看

 https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

搜索一下班课，看到一堆图标，选好后单击它会出现箭头所示的三个选项，选下载 

 

 

3.当然是svg格式的了，下载就OK了

 

4. 设置图标的样式。

设置统一的样式很重要！我们可以看下同一页面中的其他图标的代码。宽和高都是45这点得记住。

 

 然后我们用文本编辑器打开刚下载的svg文件，更改下宽高。然后在项目的文件夹下新建一个班课.svg文件把这段代码复制过去。

 

 

5.实现简单的路由跳转。

接下来照葫芦画瓢，找到这些图标共同存在的ts文件。写上路由跳转路径，笔者就是模仿收藏夹图标写的班课的代码。

 

 

补充：当然了要实现路由功能您需要在ts文件中添加引用和声明构造函数

import { Router, ActivatedRoute, Params } from '@angular/router';




  constructor(
    public router: Router,
    public activeRoute: ActivatedRoute
  ) { }

 

 

6.跳到哪里？跳到上图的绿字classlesson中，找到后端的html代码，继续照葫芦画瓢。在span这里可以自定义按钮的名字

 

 

7.图标做完了，需要跳到另一个页面。对，我们该新建这个页面了。

找到合适的位置新建一个页 ，在终端里面输入ionic g page 名字

 

 

8.接着就会新建一个文件夹，如图打开它的html文件，在title这里更改下名字为课程

 

 

9.可以看下效果。班课图标出来了

 

 

 

点击进去，嗯哼~