Angular：在不使用根分量的情況下向大多數頁面（路由器）添加側欄？

我知道正常的是讓你的app-root（根組件）有工具欄，邊欄等添加在那裏，並有一個<router-outlet>來更改內容。Angular：在不使用根分量的情況下向大多數頁面（路由器）添加側欄？

我的問題是我的根組件（應用程序根）是通過注射的index.html像這樣

<body> 
    <app-root></app-root> 
</body>

不能包含側邊欄，菜單等，我希望提供一個登錄屏幕（等屏幕），不得包含這些半共享組件。所以現在我的應用程序根包含一個簡單的<router-outlet>，它非常適合我的登錄和其他頁面，它們不能共享共享內容，即側邊欄，菜單等。

我曾希望使用類似輔助/不完全瞭解它們。一個好的方案是登錄屏幕繼續按原樣工作，它被注入路由器插座，但其他所有路由都需要將自己注入路由器插座以及一些共享內容。

<md-sidenav-container class="example-container"> 
    <md-sidenav #sidenav class="example-sidenav"> 
    An example of content in the side bar 
    </md-sidenav> 

    <div class="example-sidenav-content"> 

    <!-- All other routes should be injected here -->  

    </div> 

</md-sidenav-container>

會有人能夠幫助我應該在這裏做什麼？

我當然不希望通過複製/粘貼的方式在每個組件中放置側邊欄菜單。它應該是共享內容。

想法？我有點失落。

感謝

來源

2017-08-09 Martin

你爲什麼不直接在邊欄上使用'* ngif'直到登錄完成？這是我在我正在處理的應用程序上所具有的：<用戶側面板* ngIf =「activeUser」[active-user] =「activeUser」> \t ' – Zze

如果我理解你很好，我建議：

把你的共享內容的應用程序根組件，並使用類隱藏或ngif隱藏它們依賴於activatedRoute。
如果您有類似於（loggedIn用戶）的狀態，將用戶從不包含共享內容的頁面重定向到包含共享內容的頁面，則可以將應用程序劃分爲兩個模塊，在模塊上設置具有共享內容的所有頁面並使用所有共享內容和路由器插座在該模塊上創建迷你應用程序根組件。
1. 創建包含所有共享資源和router-outlet的組件，並在route.module中使用load子目錄導航到任何組件。

來源

2017-08-09 08:16:45 Nour

Angular：在不使用根分量的情況下向大多數頁面（路由器）添加側欄？

回答

相關問題