нажмите кнопку открыть компонент

Question

В проекте, с которым я работаю Angular, я хочу, чтобы он был go для другого компонента при нажатии кнопки, но это не так. Я подключил метод навигации к кнопке в меню и написал метод, но это не так. Как я могу исправить?

. html

<button mat-menu-item (click)="navigate()">Reservations List</button>

.ts

navigate() {
    this.router.navigate(['reservationdetail']);
}

.routing

  { path: 'reservationdetail', component: ReservationdetailComponent }

.app module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HotelComponent } from './hotel/hotel.component';
import { ReservationdetailComponent } from ' 
./reservationdetail/reservationdetail.component'; 
import { RezervasyonComponent } from './rezervasyon/rezervasyon.component';

export const routes: Routes = [
{ path: 'hotel', component: HotelComponent },
{ path: "**", redirectTo: "hotel", pathMatch: "full" },
{ path: 'rezervazyon', component: RezervasyonComponent },
{ path: 'reservationdetail', component: ReservationdetailComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

Если только навигация в функции, вы не должны перемещаться в функции. Вы можете перемещаться с html

<button mat-menu-item [routerLink]="['/reservationdetail']">Reservations List</button>

Answer 2

У вас есть этот маршрут в app.module.ts на уровне root?

, если нет, у вас должен быть маршрут других модулей перед вашим компонентом.

вы уверены Вы пишете это как

this.router.navigate(['/root/parent/../reservationdetail']);

, который будет работать ?

ОБНОВЛЕНИЕ

export const routes: Routes = [
{ path: 'hotel', component: HotelComponent },
{ path: 'rezervazyon', component: RezervasyonComponent },
{ path: 'reservationdetail', component: ReservationdetailComponent },
{ path: "**", redirectTo: "hotel" }
];

Вы можете обновить таким образом?