同じURLのコンポーネントへのルーティング方法

Question

SignInComponentとHomeComponentという2つのコンポーネントがあります。 HomeComponentはWebアプリケーションのデフォルトビューですが、SignInComponent経由でサインインする必要があり、これらのコンポーネントには同じURLのルートがあります。問題は、それらが同じURLを持っているので、それらの間をどのようにナビゲートするのかわかりません。ここに私のアプリ-routing.module.tsファイルは次のとおりです。

import { Injectable } from '@angular/core'; 
import { Router, CanActivate } from '@angular/router'; 

import { AuthenticationService } from '../services/authentication.service'; 

@Injectable() 
export class AuthGuard implements CanActivate { 

    constructor(private router: Router, private authService: AuthenticationService) { } 

    canActivate() { 
     if (this.authService.checkCredentials()) { 
      return true; 
     } 
     this.router.navigate(['']); // The problem is here 
     return false; 
    } 
} 

Answer 1

：

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { SignInComponent } from '../components/sign-in/sign-in.component'; 
import { HomeComponent } from '../components/home/home.component'; 

const appRoutes: Routes = [ 
    { path: '', component: HomeComponent, canActivate: [AuthGuard]}, 
    { path: '', component: SignInComponent} 
]; 

@NgModule({ 
    imports: [ 
     RouterModule.forRoot(
      appRoutes, 
      { enableTracing: false } 
     ) 
    ], 
    exports: [ 
     RouterModule 
    ] 
}) 
export class AppRoutingModule {} 

そして、ここではHomeComponentへのルートアクセスをチェックするAuthGuardである彼らはサインインしていない場合、それはSignInComponentにユーザーをナビゲートします

最も簡単な方法は、ログイン用のルートを作成することです。

const routes : Routes = [ 
    { 
     path: '', 
     loadChildren: 'app/pages/pages.module#HomeModule' 
    }, { 
     path: 'login', 
     component: LoginComponent 
    },{ 
     path: '404', 
     component: Page404Component 
    }, { 
     path: '**', 
     redirectTo: '/404' 
    } 
]; 

とあなたの家-routing.module中：

const routes: Routes = [ 
    { 
     path: '', 
     canActivate: [AuthGuard], 
     component: HomeComponent, 
     children: [...] 
    } 
] 

そしてガードとは、ユーザーが接続されていない場合は、ログインしてリダイレクトします。

だから、もしあなたが接続されていなければ、あなたは誰もあなたのアプリケーションをロードしません。