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

第一个ionic4开发任务!

 

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

ionic4如何新建一个图标并实现简单的路由跳转_第1张图片

 

 

找图片

 

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

ionic4如何新建一个图标并实现简单的路由跳转_第2张图片

 

 

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

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

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

ionic4如何新建一个图标并实现简单的路由跳转_第3张图片

 

 

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

ionic4如何新建一个图标并实现简单的路由跳转_第4张图片

 

4. 设置图标的样式。

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

 

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

 

 

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

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

ionic4如何新建一个图标并实现简单的路由跳转_第5张图片

 

 

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

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




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

 

 

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

ionic4如何新建一个图标并实现简单的路由跳转_第6张图片

 

 

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

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

ionic4如何新建一个图标并实现简单的路由跳转_第7张图片

 

 

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

ionic4如何新建一个图标并实现简单的路由跳转_第8张图片

 

 

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

 

ionic4如何新建一个图标并实现简单的路由跳转_第9张图片

 

 

点击进去,嗯哼~

ionic4如何新建一个图标并实现简单的路由跳转_第10张图片

 

你可能感兴趣的:([Ionic])