9.4 RouterLink 路由入口指令 - RLwu/angular-start GitHub Wiki

RouterLink - 路由入口指令 除了使用Router的navigate()方法切换路由,Angular2还提供了一个指令用来 将一个DOM对象增强为路由入口:

@Component({
    directives:[ROUTER_PROVIDERS]
    template : `<nav>
                    <b [routerLink]="['Video']">video</b> | 
                    <b [routerLink]="['Music']">music</b>
                </nav>
                <router-outlet></router-outlet>`
})    

RouterLink指令为宿主DOM对象添加click事件监听,在触发时调用Router的 navigate()方法进行路由。

路由项别名

需要指出的是,RouterLink并不能直接使用路由项的路径,routerLink属性 的值是一个路由项的名称,我们需要在路由配置时通过name属性进行设定,必须 遵循Pascal约定(首字母大写):

@RouteConfig([
    {path:"/video", component:EzVideo , name:"Video"},
    {path:"/music", component:EzMusic , name:"Music"}
])
⚠️ **GitHub.com Fallback** ⚠️