Angular2 指令—路由指令

路由指令

---

RouterOutlet

RouterOutlet的作用是在模板中开辟出一片区域，用于显示URL所对应的组件，Angular将模板中使用了 标签的组件统称为路由组件

<main>
  <router-outlet></router-outlet>
</main>

---

RouterLink

RouterLink接收一个连接参数数组，Angular将根据该数组来生成UrlTree实例进行跳转。

<div>
  <a routerLink="/form">表单</a>
</div>

RouterLink的强大之处是他可以被应用到任何HTML元素上，使得页面跳转不需要依赖超链接。

<button [routerLink]="['/form']">表单</button>

---

routerLinkActive

当RouterLink被激活时，还可以通过RouterLinkActive指令为其相应的HTML元素指令CSS类。下面的例子，定义了一个CSS类.active，并通过routerLinkActive将其赋给收藏页的链接。当单击该链接后，.active类将被应用到标签上。

<a routerLink="/form" routerLinkActive="active">表单</a>

RouterLinkActive指令除了可以作用域routerLink所在的元素之外，还可以作用于这些元素的任意祖先元素

<div routerLinkActive="active">
    <a routerLink="/form" >表单</a>
</div>