Angular 路由入门了解

刚刚接触Angular时间不长，相当于一个小白，在项目前期做原型时，对Angular的路由学习了一下

定制路由信息

在这里，我们在 main 路由中定义了一个子路由，它将继承父路由的路径，因此将显示默认的路由地址是/main 如下图，依此类推。

接下来，我们需要做的最后一件事是在我们的KlassComponent 组件中添加 router-outlet 指令，因为我们要在设置页面中呈现子路由（实现界面之间的跳转）。

routerLink

为了让我们链接到已设置的路由，我们需要使用 routerLink 指令，具体示例如下：

<ul nz-menu [nzMode]="'inline'" style="width: 240px;">
  <li nz-menu-item routerLink="/main/klass"><i nz-icon type="idcard" theme="outline"></i>班级管理</li>
  <li nz-menu-item routerLink="/main/myklass"><i nz-icon type="crown" theme="outline"></i>我的班级</li>
  <li nz-menu-item routerLink="/main/semester"><i nz-icon type="calendar" theme="outline"></i>学期管理</li>
</ul>

当我们点击以上的任意链接时，页面不会被重新加载。反之，我们的路径将在 URL 地址栏中显示，随后进行后续视图更新，以匹配 routerLink 中设置的值。

• 在使用routerLink时，我首先踩了一坑

  

  使用ng-zorro图标样式时，自己不经意间就把路由写在了li标签中，无论怎么点击按钮都没有作用（应该写在Button标签中）

  接下来，李宜衡、陈杰 同样的错误出现了。为什么在犯错误时同样不起眼的相同错误会在不同人身上发生？

routerLinkActive

在实际开发中，我们需要让用户知道哪个路由处于激活状态，通常情况下我们通过向激活的链接添加一个 class 来实现该功能。为了解决上述问题，Angular 路由模块为我们提供了 routerLinkActive 指令，该指令的使用示例如下：

<nav>
  <a routerLink="/main/klass" routerLinkActive="active">Home</a>
  <a routerLink="/main/myklass" routerLinkActive="active">Change password</a>
  <a routerLink="/main/semester" routerLinkActive="active">Profile Settings</a>
</nav>

通过使用 routerLinkActive 指令，当 a 元素对应的路由处于激活状态时，active 类将会自动添加到 a 元素上。

routerLinkActive并没有亲自试验，ng-zorro导航默认为激活的，比较强大！！