javascript - 具有角度组件路由器的不同布局

Question

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

这是我的组件树：

这也是一个plnkr：链接

这就是我定义登录和主路由的方式：

/* 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));
}