在路由器插座外导航

Question

我已按照官方文件： https://angular.io/docs/ts/latest/guide/router.html

但是当我想在AuthGuard中导航到LoginComponent时，我不想在保存router-outlet标签的父组件（AppComponent）内导航。我想将LoginComponent重定向到具有router-outlet标记的父组件（AppComponent）之外。作为单个独立组件LoginComponent，我不希望LoginComponent具有AppComponent的主html。

这可能吗？怎么样？ 完整示例： http://plnkr.co/edit/34ajPEi1OucEXNw4L2Do?p=preview

更新 此外，当我尝试在AppComponent.html中调整路由器插座时，如下所示：

<div *ngIf="isAuth()">
<h1 class="title">Head Router</h1>
<router-outlet></router-outlet>
</div>
<div *ngIf="!isAuth()"><app-login></app-login></div>

控制台上的

我收到以下错误：

browser_adapter.ts:82EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'LoginComponent'

完整错误示例： http://plnkr.co/edit/rEEZrB?p=preview

Answer 1

我认为你想要的是不可能的。我想你需要创建另一个主html文件并在那里引导你的独立组件。然后导航到这个新文件的URL。 另一种选择是在主要组件中隐藏不需要的节点（使用*ngClass='{"hidden":is_login}'）或类似的东西。