Угловая маршрутизация с заполнителем в маршруте по умолчанию

Question

У меня определена пара маршрутов, которые соответствуют некоторым компонентам, и затем у меня есть универсальный маршрут с заполнителем, подобным этому:

const routes: Routes = [
  { path: 'some', component: SomeComponent },
  { path: 'other', component: OtherComponent },
  { path: ':route', component: PageNotFoundComponent }
  ];

У меня тогда есть PageNotFoundComponent, подобный этому:

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-page-not-found',
  templateUrl: './page-not-found.component.html',
  styleUrls: ['./page-not-found.component.css']
})
export class PageNotFoundComponent implements OnInit {

  missingRoute: string;
  route: any;

  constructor( route: ActivatedRoute ) {
    this.route = route;
  }

  ngOnInit() { 
    this.missingRoute = this.route.snapshot.paramMap.get('route');
  }
}

и HTML-файл для PageNotFoundComponent просто так:

<p>The route {{missingRoute}} is not implemented.</p>

У меня есть компонент с некоторыми ссылками маршрутизатора и выходом маршрутизатора (здесь не показано). Если я нажимаю на ссылки маршрутизатора для некоторые и другие , это работает - в том смысле, что эти компоненты отображаются на выходе маршрутизатора. У меня также есть две ссылки на маршрутизаторы, которые ссылаются на « didnotexist » и « doesnotexist2 ». Если я обращаюсь к didnotexist, то это отображается правильно (PageNotFound сообщает мне об этом), но если я затем нажимаю на didnotexist2, я получаю ту же информацию, что и для hasnotexist: «Маршрут didnotexist не реализован». Я надеялся получить сообщение «Маршрут didnotexist2 не реализован».

Что я пропустил?

Answer 1

В вашей конфигурации маршрутов вы пропустили это:

{ path: '**', component: PageNotFoundComponent }

За угловые документы

Как только вы это сделаете, вам нужно будет захватить запрошенный маршрут так,Вы можете отобразить missingRoute. Это рассматривается в этой части документов

export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    let url: string = state.url;

    return this.checkLogin(url);
  }

  checkLogin(url: string): boolean {
    if (this.authService.isLoggedIn) {
      return true;
    }

    // Store the attempted URL for redirecting
    this.authService.redirectUrl = url;

    // Navigate to the login page with extras
    this.router.navigate(['/login']);
    return false;
  }
}

Answer 2

это происходит потому, что вы пытаетесь перейти к тому же корню, меняется только параметр маршрута. Таким образом, чтобы получить измененный параметр вместо использования this.route.snapshot.paramMap.get('route');, просто подпишитесь на параметры маршрута, например,

this.route.params.subscribe(data=>{
this.missingRoute =data['route']
});

Кроме того, почему бы вам просто не использовать ключевое слово private в инъекции конструктора вместо определения свойства и присвоения подобного

 constructor(private route: ActivatedRoute ) {

  }