本文受众是 Angular 初学者,没有多级路由使用经验,不知道登录页面与主页跳转的实现逻辑,相反,看到这里你就可以结束了,不要浪费时间。下面来看看小白对于登录页面的理解:
上图中左边是导航菜单栏,右边的空白区域是 所在区域,即所有实现业务逻辑的组件都在这里显示 - 点击左边导航栏的项目右侧B区域就替换为对应的页面,那么问题来了,登录页面要怎么做?
多级路由实现图
图有点大,看不清楚的放大点看吧。看了这个图相信一部分人已经懂了实现原理了。如果还是不懂,来看下面的文字讲解。
实现原理讲解
本文案例以 Angular + ng-zorro-antd 来讲解,如果使用了别的UI套件也没关系,原理都是一样的
使用命令 ng new logindemo 创建项目
在命令行界面使用 cd 切换当前路径为上面创建的项目的根目录下
使用命令 ng add ng-zorro-antd 向项目中添加UI套件
此时运行起来后大致就是本文的第一个图片的显示效果:左边是导航菜单,右边是变换显示业务组件的区域
那么小白走到这里就被误导了,产生了本文初的疑惑,下面开始来解扣了。
项目创建好了,下面介绍改造项目的步骤:
注释掉文件 app.component.html 中的全部代码,并且添加一行:
创建布局组件 layout ,将文件 app.component.html 中被注释