Angular入门，搭配ant简单使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angular入门，搭配ant简单使用相关的知识，希望对你有一定的参考价值。
参考技术A 安装最新版本安装指定版本，x.x.x版本号
工程名ant，会得到一个ant文件夹
运行该命令会询问是否单独生成路由文件，以及选择css预处理格式。路由文件看个人喜好，开发中可随意更改。css预处理样式建议使用less，方便使用ant
ng g c home 创建home组件
ng g m home --routing 创建home模块，独立出路由文件
执行后生成src/app/home文件夹，如下图
相当于占位符，具体显示内容由主路由决定
使用 loadChildren 属于懒加载，需要在home-routing.module.ts文件中再具体制定路由导航到哪个组件
home-routing.module.ts文件如下：
将index路由导航到homecomponent，即可显示home.component.html的内容
使用IDE运行，或者 ng serve 命令运行项目，默认端口4200。访问localhost:4200会自动跳转到index，显示如下
在home.component.ts中创建变量name
home模块是懒加载出来的，所以需要单独引入ant，在app模块中引入的在这不起作用
home.module.ts如下
修改home.component.html文件
修改home.component.less文件，设置样式
运行效果如图
😉下次更新DOM操作，辅助路由，路由复用等
以上是关于Angular入门，搭配ant简单使用的主要内容，如果未能解决你的问题，请参考以下文章