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;
}