打开目录\thingsboard\ui-ngx\src\app\modules\home\pages的终端,创建路由文件,输入命令:ng g module 文件名 --routing
![](https://img-blog.csdnimg.cn/img_convert/070bfe79e80090166af42cc881cf5e1a.png)
创建组件文件,输入命令:ng g c hello
![](https://img-blog.csdnimg.cn/img_convert/849879469da0d04b83c52876bc12ce9c.png)
打开routing.module.ts文件:路由配置
![](https://img-blog.csdnimg.cn/img_convert/5464976852204f7fefefc8b23afb4d6e.png)
打开src\app\modules\home\pages\home-pages.module.ts文件:引入组件
![](https://img-blog.csdnimg.cn/img_convert/220694a3ca0433a56c6ad13d081370bc.png)
打开src\app\core\servies\menu.servies.ts文件:菜单路由编写
对应文件:(ui-ngx\src\app\core\services\material-icons-codepointsraw) 只有这里面写的才有用,上面链接只是参考
![](https://img-blog.csdnimg.cn/img_convert/f09345ac534b99100eab6f7dee434329.png)
显示结果:
![](https://img-blog.csdnimg.cn/img_convert/4e51b16bc8f6fc3c166fd1b5867c483c.png)
拓展:在菜单下创建组件
打开此页面所在的文件夹终端
输入命令:ng g c 组件名
打开创建完的component.ts文件,复制selector的键值
![](https://img-blog.csdnimg.cn/img_convert/63aee84869ec5ff29b369e3a2271482b.png)
在父组件的html文件中当标签使用即可
![](https://img-blog.csdnimg.cn/img_convert/619c1a075bf35395c0d9cdc5d1ad12db.png)
显示结果:
![](https://img-blog.csdnimg.cn/img_convert/5165c19be88561591bf71a74d31f0ebf.png)