web-dev-qa-db-ja.com

router-outletでsidenavを持ち、router-outletで個別にログインする方法は？

ログインページを使用してアプリを実装しようとしていますが、ユーザーがログインすると、router-outletを持つナビゲーションバー、ツールバー、サイドナビが表示されます。

基本的に、app.component.htmlでこれを定義しました：

<div *ngIf="isAuthenticated">
    <app-custom-navbar></app-custom-navbar>
    <app-custom-toolbar></app-custom-toolbar>
    <app-custom-sidenav></app-custom-sidenav>
</div>

<router-outlet></router-outlet>

そして私はこのルーティングを持っています：

const routes: Routes = [
    { path: '', canActivate: [AuthenticationGuard], component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'data', canActivate: [AuthenticationGuard], component: DataComponent },
    { path: 'projects', canActivate: [AuthenticationGuard], component: ProjectsComponent },
];

したがって、これはうまく機能します。ユーザーが認証されていない場合、ユーザーは/loginにリダイレクトされます。

問題は、彼が認証されると、sidenavコンポーネントがスペース全体を占有し、他のコンポーネントが表示されないことです。

基本的にこれが問題です：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav>

    <!-- sidenav template... -->

  </mat-sidenav>
  <mat-sidenav-content>

   <!-- how can I put my content here and use routing at the same time ? -->
   <!-- <router-outlet></router-outlet> -->

  </mat-sidenav-content>
</mat-sidenav-container>

補助ルートを使用することを考えましたが、ルートはユーザーフレンドリーではありません。代わりに、次のように単純にしておきたいと思います。

http://mywebsite.com/data
http://mywebsite.com/login
http://mywebsite.com/projects

[〜＃〜] edit [〜＃〜]：問題は解決しました：基本的に、ルーティングを適切に設定する必要がありました。メインルーティングを追加する必要がありました-例：ログイン、ログアウト、デフォルトルート。次に、デフォルトルート（私の場合は空の ''パス）の下に子アイテムとしてコンポーネントを追加しました。そうすれば、私のルートはきれいに見え、私が望むように見えます。実例へのリンクを使用して投稿を編集しています。

これがURLです： stackblitz

angularangular-materialangular-material2angular-routingangular-router
4
Apostrofix

ルートを含む2つのファイルが必要になります。最初のファイルには、ナビゲーションバー/サイドバーのないページが含まれます。

app.routes.ts

import { Routes } from '@angular/router';

export const ROUTES: Routes = [
      {
        path: '', redirectTo: 'login', pathMatch: 'full'
      },
      {
        path: 'myApp', canActivate: [IsAuthorized], loadChildren: './layout/layout.module#LayoutModule'//<- Other routes here
      },
      {
        path: 'login', loadChildren: './login/login.module#LoginModule'
      },
      {
        path: 'error', component: ErrorComponent
      },
      {
        path: '**', component: ErrorComponent
      }
    ];

次のファイルには、他のコンポーネントまたはモジュールへのルートが含まれます。

layout.routes.ts

import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout.component';
const routes: Routes = [
      { path: '', component: LayoutComponent, children: [
        { path: 'admin', loadChildren: '../admin/admin.module#AdminModule'},
        { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
        { path: 'home', loadChildren: '../home/home.module#HomeModule' },
        { path: 'about', loadChildren: '../about/about.module#AboutModule' }
      ]}
    ];
    export const ROUTES = RouterModule.forChild(routes);

layout.module.ts

import { ROUTES } from './layout.routes';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';

@NgModule({
  imports: [
    ROUTES
  ],
  declarations: [LayoutComponent, SidebarComponent, NavbarComponent
})
export class LayoutModule {
}

これで、layout.component.htmlファイルに次のレイアウトが作成されます。

layout.component.html

<app-custom-navbar></app-custom-navbar>
<app-custom-toolbar></app-custom-toolbar>
<app-custom-sidenav></app-custom-sidenav>
  <router-outlet></router-outlet>

app.module.ts

import { ROUTES } from './app.routes';
...
imports: [
    RouterModule.forRoot(ROUTES, {
      useHash: true,
      preloadingStrategy: PreloadAllModules
    })
  ],
...
export class AppModule { ... }

home.module.ts

export const routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' }
];

NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    RouterModule.forChild(routes),
  ]
})
export class HomeModule {
  public static routes = routes;
}

これで、AppModuleが最初のapp.routes.tsをロードし、ログインモジュールに移動することがわかります。ユーザーがログインして認証された後。それらを「myApp/home」にリダイレクトできます。これにより、HomeModule（ルートもあります！）がトリガーされ、HomeComponentがロードされます。

4
jriver27