如何在角度2中使用登錄組件的單獨佈局？

我是新角度。我創建了一個登錄組件，它工作得很好，但問題是我想要整個應用程序的登錄單獨佈局。需要做些什麼改變？如何在角度2中使用登錄組件的單獨佈局？

我在谷歌搜索，但每個人都給diff解決方案，這也是不明白的。

const appRoutes: Routes = [ 
{ path: 'alert/:id', component: AlertDetailComponent }, 
{ path: 'alerts', component: AlertsComponent }, 
{ path: 'dashboard', component: EriskDashboardComponent }, 
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }, 
{ path: 'login', component: LoginComponent }, 
];

在app.component.html

<!-- page content --> 
<div class="right_col" role="main"> 
    <router-outlet></router-outlet>   
</div> 
<!-- /page content -->

來源

2017-01-27 Haseeb Ahmad

你是什麼意思**從整個應用程序單獨登錄** ?? ?? – Aravind

表示我想使用與其他組件不同的佈局 –

您必須在頂層使用兩個'Routes'（例如'login'＆'content'），然後將剩餘的路線作爲'content'路線的'children' 。請閱讀[文檔]（https://angular.io/docs/ts/latest/guide/router.html）。 –

在你app.component.html：

<router-outlet></router-outlet>

然後創建MainComponent (main.component.ts)並把所有的主要的應用程序佈局的main.component.html：

<!-- page content --> 
<div class="right_col" role="main"> 
    <router-outlet></router-outlet>   
</div> 
<!-- /page content -->

對於您的常規應用程序組件，此組件將是父項。

然後在你的LoginComponent把不同的佈局沒有路由器的出口，例如：

<div class="login-wrapper"> 
    <div class="login"> 
    ... your login layout 
    </div> 
</div>

然後修改你的路由是類似的東西：

const appRoutes: Routes = [ 
    {path: 'login', component: LoginComponent}, 
    {path: '', component: MainComponent, redirectTo: '/dashboard', pathMatch: 'full', 
    children: [ 
     { path: 'alert/:id', component: AlertDetailComponent }, 
     { path: 'alerts', component: AlertsComponent }, 
     { path: 'dashboard', component: EriskDashboardComponent } 
    ]}];

所以MainComponent將包含所有可重複使用的佈局和任何子組件的應用程序結構，而LoginComponent是獨立的，它有自己的佈局。

來源

2017-12-01 14:35:21 cutoffurmind

如果你在應用中沒有任何額外路由參數的問題，那麼這是更模塊化。 –

來這裏發佈這個解決方案。這也有一個好處，就是隻需要AuthGuard一頁就可以隱藏未經身份驗證的用戶的全部應用程序。 – Murphy4

它仍然有一些'懶惰加載模塊的限制... ... – sdey0081

在「最」父組件，您可以.subscribe到router.eventsdata，一旦你打的登錄組件活動路由，該組件將被通報，並添加了不同的佈局（主題）你想css class或id（也許這將被封裝在一個部分的scss文件中 - 如果你不使用scss/sass，或許你應該考慮它）。

有一次，你改變路線（除了登錄）類將消失，「自定義」（不同）佈局將不再適用。

希望這可能會有所幫助。您始終可以使用@Output/@Input()或帶有觀察值（用於非父 - 子組件關係）的共享單體服務在這些組件之間共享狀態，並根據狀態更改執行相應操作。如果您有任何問題/意見，請隨時添加。我認爲角度文檔可以幫助實現細節。

來源

2017-12-01 21:35:12 DrNio

如何在角度2中使用登錄組件的單獨佈局？

回答

相關問題