使用角度分量路由器的不同布局

Question

我想用组件路由器构建一个角度应用程序。此应用程序包含两种不同的布局。一个是具有两个字段的登录屏幕，一个按钮，没有别的。另一个是带有标题，侧边栏和内容的主要布局。内容区域根据路线而变化。

这是我的组件树：

这里也是一个plnkr：Link

这就是我如何定义login和main的路由：

/* main.js */
$routeConfig: [
   {path: '/login', name: 'Login', component: 'login'},
   {path: '/...', name: 'Main', component: 'main', useAsDefault: true}
]

现在，我现在使用的方法存在两个主要问题。

首先，使用ng-link时，我的Main组件中的所有链接都用双斜杠解析。这可能会导致我认为某些浏览器出现问题。

/*this is what i get*/ 
//crisis-center 

/* this is how it should look like*/
/crisis-center

其次，由于我的导航组件不是路由组件，而是单独的路由组件，因此我无法访问$ route。因此，我必须注入$ rootRouter。现在，当我使用isRouteActive函数时，它总是返回true。 这意味着，我的所有导航链接都将获得活动类。

/* main.js */
this.routeIsActive = function (routerLink) {
    /* always returns true */
    return $rootRouter.isRouteActive($rootRouter.generate(routerLink));
}