安装指定版本,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文件,设置样式
运行效果如图