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

Question

我是角度方面的新手。我正在创建一个 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'

Answer 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)
  ]