Angular CanActivate не работает должным образом - PullRequest
Новая
       13

Angular CanActivate не работает должным образом

0 голосов
/ 16 сентября 2018

Я иду по пути "/ event / 1", что контент существует, он не идет по пути "/ event / 1", но перенаправляет на путь "/".но я иду по пути "/ event / 8", который не существует, он идет на страницу 404, как и ожидалось.Как я ошибаюсь?

Angular CanActivate does not work as expected.

Итак, это мой код.

В маршрутах .ts путь "events /: id" является источником проблем.

import { Routes } from "@angular/router";
import { EventListComponent } from "./events/event-list/event-list.component";
import { EventDetailComponent } from "./events/event-detail/event-detail.component";
import { CreateEventComponent } from "./events/create-event/create-event.component";
import {NotFoundComponent} from "./errors/not-found/not-found.component";
import {EventRouteActivator} from "./events/event-detail/event-route-activator.service";

export const appRouters: Routes = [
  { path: "events", component: EventListComponent },
  { path: "events/new", component: CreateEventComponent },
  { path: "events/:id", component: EventDetailComponent, canActivate: [EventRouteActivator] },
  { path: "404", component: NotFoundComponent },
  { path: "", redirectTo: "/events", pathMatch: "full" },
];

В event-route-activator.service 

import { Router, ActivatedRouteSnapshot, CanActivate } from "@angular/router";
import { Injectable } from "@angular/core";
import { EventService } from "../services/event.service";

@Injectable()
export class EventRouteActivator implements CanActivate {
  constructor(private eventService: EventService, private router: Router) {}
  canActivate(route: ActivatedRouteSnapshot) {
    const eventExists = !!this.eventService.getEvent(+route.params["id"]);
    if (!eventExists) {
      this.router.navigate(["/404"]);
      return eventExists;
    }
  }
}

В app.modules я импортировал NotFoundComponent, который является страницей 404, и EventRouteActivator в качестве поставщика. 

import { ToastrService } from "./events/services/toastr.service";
import { EventDetailComponent } from "./events/event-detail/event-detail.component";
import { appRouters } from "./routes";
import { CreateEventComponent } from "./events/create-event/create-event.component";
import { NotFoundComponent } from "./errors/not-found/not-found.component";
import { EventRouteActivator } from "./events/event-detail/event-route-activator.service";

@NgModule({
  declarations: [
    AppComponent,
    EventListComponent,
    EventThumbnailComponent,
    NavbarComponent,
    EventDetailComponent,
    CreateEventComponent,
    NotFoundComponent
  ],
  providers: [EventService, ToastrService, EventRouteActivator],
  imports: [BrowserModule, RouterModule.forRoot(appRouters)],
  bootstrap: [AppComponent]
})
export class AppModule {}
...