无法匹配任何路由。 URL 段：同时使用多个路由器出口

Posted 2023-02-23

【中文标题】无法匹配任何路由。 URL 段：同时使用多个路由器出口

【英文标题】：Cannot match any routes. URL Segment: while using multiple router-outlet

【发布时间】：2019-02-18 04:29:36

【问题描述】：

我是角度方面的新手。我正在创建一个 Angular 6 的门户 Web 应用程序。

这个项目有一个登录表单和一些用户环境页面。在用户环境中，页眉、页脚和侧边菜单在所有页面之间是通用的，但这些在登录页面中不可见。因此，我决定为此分配两个具有不同名称的<router-outlet> 标签。

我在 app.component.html 中的代码如下：

<div class="container-fluid">
  <router-outlet name="without_header_and_footer"></router-outlet>
  <router-outlet name="admin_panel"></router-outlet>
</div>

之后，我创建了两个名为 AuthGuardService 和 GuestGuardService 的身份验证服务，它们控制对登录表单和用户环境页面的访问。

这两个服务代码如下：

auth-guard.service.ts

export class AuthGuardService implements CanActivate , CanActivateChild
  constructor(private authService: AuthService , private router: Router)  

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
    Observable<boolean>
    | Promise<boolean>
    | boolean 
return this.authService.isLogin().then((isLogin) => 
  if(isLogin)
    return true;
  
  this.router.navigate([
    
      outlets: 
        without_header_and_footer: ['']
      
    
  ]);
);
  

  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot):
    Observable<boolean>
    | Promise<boolean>
    | boolean 
    return this.canActivate(childRoute , state);
  

guest-guard.service.ts

export class GuestGuardService implements CanActivate , CanActivateChild
  constructor(private authService: AuthService , private router: Router)  

  canActivate(route: ActivatedRouteSnapshot, state: 
RouterStateSnapshot):
    Observable<boolean>
    | Promise<boolean>
    | boolean 
return this.authService.isLogin().then((isLogin) => 
  if(!isLogin)
    return true;
  
  this.router.navigate([
    
      outlets: 
        admin_panel: ['home']
      
    
  ]);
);
  

  canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot):
Observable<boolean>
| Promise<boolean>
| boolean 
return this.canActivate(childRoute , state);
  

authService 这两个类的构造函数中注入的变量是从 AuthService 类中实例化的，如下所示：

auth.service.ts

export class AuthService 
  loggedIn: boolean = false;
  constructor()  

  isLogin()
const promise = new Promise((resolve , reject) => 
  setInterval(() => 
    return resolve(this.loggedIn);
   , 1000);
);
return promise;
  

  login()
    this.loggedIn = true;
  

  logout(): void
    this.loggedIn = false;
  

app.modules.ts

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  NO_ERRORS_SCHEMA  from '@angular/core';
import  MDBBootstrapModule  from 'angular-bootstrap-md';
import  AppComponent  from './app.component';
import  LoginComponent  from './components/login/login.component';
import AppRouting from './app-routing';
import  HomeComponent  from './components/home/home.component';
import AuthGuardService from "./services/auth/auth-guard.service";
import GuestGuardService from "./services/auth/guest-guard.service";
import AuthService from "./services/auth/auth.service";
import FormsModule, ReactiveFormsModule from "@angular/forms";
@NgModule(
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    AppRouting
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [
    AuthGuardService,
    GuestGuardService,
    AuthService
  ],
  bootstrap: [AppComponent]
)
 export class AppModule  

app-routing.ts

import NgModule from '@angular/core';
import RouterModule, Routes from '@angular/router';
import LoginComponent from './components/login/login.component';
import HomeComponent from "./components/home/home.component";
import AuthGuardService from "./services/auth/auth-guard.service";
import GuestGuardService from "./services/auth/guest-guard.service";

const appRoutes: Routes = [
  
    path: '',
    pathMatch: 'full',
    component: LoginComponent ,
    outlet: 'without_header_and_footer',
    canActivate: [GuestGuardService],
  ,
  
    path: 'home',
    component: HomeComponent,
    outlet: 'admin_panel',
    canActivate: [AuthGuardService]
  
];

@NgModule(
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
)
export class AppRouting 

最后我的路线如下：

const appRoutes: Routes = [
  
    path: '',
    pathMatch: 'full',
    component: LoginComponent ,
    outlet: 'without_header_and_footer',
    canActivate: [GuestGuardService],
  ,
  
    path: 'home',
    component: HomeComponent,
    outlet: 'admin_panel',
    canActivate: [AuthGuardService]
  
];

似乎每件事都是正确的。但是当我想导航到路由 /home 时，控制台中会显示以下错误：

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home' Error: Cannot match any routes. URL Segment: 'home'

【问题讨论】：

您能否发布您的应用模块代码以及您如何导航到家？

我被添加了app.module.ts文件内容。

你还没有在Router模块中注册你的路由。

我在浏览器地址栏输入了localhost:4200/home

我在 AppRouting 文件中注册了它们并在 app.module.ts 的导入部分中导入了它

【参考方案1】：

将您的 aap.routing.ts 文件更改为：

import LoginComponent from './components/login/login.component';
import HomeComponent from "./components/home/home.component";
import AuthGuardService from "./services/auth/auth-guard.service";
import GuestGuardService from "./services/auth/guest-guard.service";

export const appRoutes: Routes = [
  
    path: '',
    pathMatch: 'full',
    component: LoginComponent ,
    outlet: 'without_header_and_footer',
    canActivate: [GuestGuardService],
  ,
  
    path: 'home',
    component: HomeComponent,
    outlet: 'admin_panel',
    canActivate: [AuthGuardService]
  
];

然后在你的 app.module.ts 文件中像这样导入 appRoutes：

import  appRoutes  from './app.routing.ts'

并将您的导入数组替换为：

imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes)
  ]