Почему routerLink не работает, когда все настроено правильно

Question

Часть вида, где routerLink находится

<p><a routerLink="/registration" class="nav-link">Зарегистрироваться</a></p>

Мой app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

import { AppComponent } from './components/app.component';
import { TestStartComponent } from './components/test-start.component';
import { TestListComponent } from './components/test-list.component';
import { RegistrationComponent } from './components/registration.component';


const appRoutes: Routes = [
    { path: '', component: TestListComponent },
    { path: 'teststart/:id', component: TestStartComponent },
    { path: '**', redirectTo: '/' },
    { path: 'registration', component: RegistrationComponent}
];

@NgModule({
    imports: [BrowserModule, [CommonModule], FormsModule, HttpClientModule, RouterModule.forRoot(appRoutes)],
    declarations: [AppComponent, TestListComponent, TestStartComponent, RegistrationComponent],
    bootstrap: [AppComponent]
})

Мой RegistrationComponent

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';
import { User } from '../models/user';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';

@Component({
    templateUrl: '../views/registration.component.html',
    providers: [UserService]
})

export class RegistrationComponent implements OnInit {
    constructor(
        private userService: UserService
    ) { }

    ngOnInit() {
        console.log("sas");
    }

Моя регистрация. компонент. html

<p>sas</p>

Когда я нажимаю на ссылку - ничего не происходит. Другой маршрутизатор ссылки работают правильно.

Answer 1

Пожалуйста, добавьте pathMatch: 'full' к следующему маршруту:

{ path: '', component: TestListComponent }

и переместите следующий маршрут в конец:

{ path: '**', redirectTo: '/' }

Таким образом, конечный результат будет:

    { path: '', component: TestListComponent, pathMatch: 'full' },
    { path: 'teststart/:id', component: TestStartComponent },
    { path: 'registration', component: RegistrationComponent},
    { path: '**', redirectTo: '/' }

В соответствии с официальной документацией Angular:

Стратегия сопоставления путей «полная» соответствует целому URL. Это важно делать при перенаправлении маршрутов с пустым путем. В противном случае, поскольку пустой путь является префиксом любого URL-адреса, маршрутизатор будет применять перенаправление даже при переходе к пункту назначения перенаправления, создавая бесконечный l oop.

Для подстановочного знака официальный в документах говорится:

Строка URL-адреса, использующая нотацию соответствия маршрутизатора. Может быть подстановочным знаком (**), который соответствует любому URL (см. Примечания по использованию ниже). По умолчанию используется «/» (путь root).

Наконец, примите во внимание, что порядок, в котором вы указываете свои маршруты, важен. Думайте так, как будто движок Angular движется один за другим, сканируя каждый сверху вниз, чтобы увидеть, какой из них соответствует запрошенному URL.