Angular 路由器沒有導航到路由

Question

我正在使用以下結構的 Angular 應用程序：

• 應用程序

  • 布局

    • 管理布局

  • 頁面

    • 儀表板
    • 圖標
    • 桌子
    • 用戶

  • 共享

  • 側邊欄

我正在嘗試在 admin-layout 中編寫 auth-guard.service.ts 和 auth.service.ts，因為我已經為要在 DOM 上訪問的頁面定義了路由。

但是，當我嘗試登錄儀表板頁面時，它不會導航到我在代碼中編寫的路線。 但是，當我單擊側邊欄上的路線時，它只會將變量打印為 true，這就是此處的 auth-guard 所做的。 它不會導航到該路線。 這是我的代碼：

admin-layout.routing.ts

export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard',      component: DashboardComponent },
{ path: 'user',           component: UserComponent },
{ path: 'table',  canActivate: [AuthGuard],        component: TableComponent }, 
{ path: 'icons',          component: IconsComponent }
];

auth-guard.service.ts

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

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | 
Promise<boolean> | boolean
{

return this.authService.isAuthenticated().then(
  (authenticated: boolean) => {
    if(authenticated){
      console.log('accessed this if part'); 
      this.router.navigate(["/table"]); // isn't navigating to this 
    }
    else
    {
      console.log("Accessed else part");
      return false;
    }
  }
)

}

auth.service.ts

export class AuthService
{
 loggedIn:boolean;
 isAuthenticated()
{
 const promise = new Promise((resolve, reject) =>{
  setTimeout(() => {
    resolve(this.loggedIn);
  }, 100);
}
);
return promise;
}

check_Authentication(logIn : boolean)
{
if(logIn == true)
{
  this.loggedIn = true;
  }
 }
}

儀表板.component.ts

constructor(private http: HttpClient, private router: Router, private authService: AuthService){}
private onAuthorization(form: NgForm)
{
  this.http.post('http://localhost:3000/auth', form.value, {responseType: "text"})
  .subscribe(responseData =>{
    console.log(responseData);
    if(responseData == "Successfully Authorized")
    {
      this.auth_check = true;
      this.authService.check_Authentication(this.auth_check);
    }
    else
    {
      this.auth_failed = true;
    }

  }

知道我在這里做錯了什么嗎？ 編輯：當我嘗試通過單擊側邊欄上的表格訪問路線時，無限循環開始打印相同的內容。

Answer 1

您可以按如下方式使用子組件

{
   path: 'parent', component: ParentComponent, children:
    [
     { path: 'child', component: ChildComponent }
    ]
 }

Answer 2

您需要返回 true：

if(authenticated){
  console.log('accessed this if part'); 
  this.router.navigate(["/table"]); // isn't navigating to this 
  return true; <----- here
}

Answer 3

感謝您的回復。 對於任何想看到這個問題尋求幫助的人，因為我是 Angular 的新手並且不知道很多東西，所以我決定簡化我的代碼。 我通過這種方式編寫代碼解決了這個問題：

admin-layout.routing.ts

export const AdminLayoutRoutes: Routes = [
{ path: 'dashboard',      component: DashboardComponent },
{ path: 'user',           component: UserComponent },
{ path: 'table',  canActivate: [AuthGuard],        component: TableComponent },
{ path: 'icons',          component: IconsComponent }
];

auth-guard.service.ts

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } 
from "@angular/router";

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

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean
{
  if(this.authService.isAuthenticated())
  {
    this.router.navigate['/table']; //this is although not working, I'll resolve it
    return true;
  }
return false;
}

auth.service.ts

export class AuthService
{
 loggedIn:boolean;

 check_Authentication(logIn : boolean)
{
 if(logIn == true)
 {
  this.loggedIn = true;
 }
 else
 {
  this.loggedIn = false;
 }
}

isAuthenticated()
{
 if(this.loggedIn == true)
 {
  return true;
 }
 else
 {
  return false;
 }
}
}

儀表板.component.ts

constructor(private http: HttpClient, private router: Router, private authService: 
AuthService){}

private onAuthorization(form: NgForm)
{
  this.http.post('http://localhost:3000/auth', form.value, {responseType: "text"})
  .subscribe(responseData =>{
    console.log(responseData);
    if(responseData == "Successfully Authorized")
    {
      this.auth_check = true;
      this.authService.check_Authentication(this.auth_check);
    }
    else
    {
      this.auth_failed = true;
    }

  }
  ,error => {
    this.connectionToServer = false;
  });
  this.connectionToServer = true;
}