Question

我是新手。我正在创建角度为6的门户网站应用程序。

该项目有一个登录表单和一些用户环境页面。在用户环境页面中，页眉，页脚和旁注菜单在所有页面之间是通用的，但在登录页面中不可见。因此，我决定为此分配两个名称不同的<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)
  ]

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

1 个答案: