Angular 2渲染頁面沒有路由器插座

我有HTML模板，帶有幻燈片菜單和頂部導航菜單以及渲染主路徑頁面的塊。這樣的：Angular 2渲染頁面沒有路由器插座

... 
<div class="content-wrapper"> 
    <router-outlet></router-outlet> 
</div> 
...

但之後，我的登錄頁面，在這個內容包裝塊渲染。如何編寫一些渲染代碼LoginPage沒有route-outline component？（不呈現頂部導航和滑動菜單）

來源

2016-08-18 Taras Kovalenko

保持路由器出口，但使用路由器警衛以防止呈現，除非用戶登錄的路線。我的博客上講述在這裏：

https://yakovfain.com/2016/07/20/angular-2-guarding-routes/

來源

2016-08-18 16:13:17

如果我理解你的問題，你想隱藏的用戶未登錄的頂部導航和滑動菜單。

我的方法這樣做的將這些控件/組件從<router-outlet></router-outlet>中呈現的頁面拉出，然後隱藏它們直到用戶登錄（可能通過身份驗證服務上的布爾屬性顯示用戶已成功登錄）。

所以類似這樣的東西：

<div class="content-wrapper"> 
    <top-nav *ngIf="authenticationService.userLoggedIn"></top-nav> 
    <slide-menu *ngIf="authenticationService.userLoggedIn"></slide-menu> 
    <router-outlet></router-outlet> 
</div>

登錄頁面呈現在路由器的出口，而當成功用戶登錄，設置了標誌上的服務，以及接下來的頁面呈現和頂部導航/幻燈片菜單被添加到DOM。

如果我大錯特錯，讓我知道，也許我還可以幫忙

來源

2016-08-18 13:37:20

我認爲這是不是很好的解決方案。我認爲存在一些標準的解決方案。 –

所以，爲了確保我理解你正在嘗試做什麼，你需要渲染頂部導航和幻燈片菜單，並將它放在''中呈現的每個頁面上。你不想讓他們渲染的唯一時間是當他們登錄頁面？ –

是的，你理解我 –

正確的解決問題的方法是不會到處去router-outlet，但使用一個額外的元件與router-outlet（RO1）（讓我們稱之爲它RootComponent），但沒有導航和側菜單。在RO1中，您應該加載組件NavMenuComponent（使用導航，側邊菜單和自己的router-outlet RO2）。然後，您可以使用子路線，以確保在RootComponent的RO1中加載了NavMenuComponent（將具有導航和側邊菜單）或LoginComponent（其將不具有導航和側邊菜單）。 RO2將按照您現在的狀態加載內容。

假設RootComponent是你的模塊中的deafult組成部分，路線將如下所示：

const appRoutes: Routes = [ 

    { path: 'login', component: LoginComponent }, 
    { 
    path: '', 
    redirectTo: 'login', 
    pathMatch: 'full' 
    }, 

    { 
    path: 'app', component: NavMenuComponent, 
    children: [ 
     { path: 'youorldpath1', component: YourOld1Component }, //the path will /app/youroldpath1 instead of /youroldpath1 
     { path: 'youorldpath2', component: YourOld2Component, canActivate: [CanActivateViaAuthGuard] }, 
     { path: '**', component: ErrorComponent } 
    ] 
    }, 

    { path: '**', component: ErrorComponent } 

];

RootComponent只能有：

<router-outlet></router-outlet>

此處瞭解詳情：https://angular.io/guide/router#child-routing-component

來源

2017-12-08 20:15:49

Angular 2渲染頁面沒有路由器插座

回答

相關問題