То, что я написал html, не регистрируется?

Question

Я работаю над проектом отеля Angular. На главной странице есть кнопка меню и есть 2 варианта. Вариант 2 идет на страницу деталей бронирования. Коды, которые я написал в части html этого компонента, не зарегистрированы. Я вижу основную статью каждый раз, когда я ее запускаю (оговорка подробно работает!). Как я могу это исправить.

.hotel-component- html

<button id="btnMenu" class="btn btn-warning" mat-button [matMenuTriggerFor]="menu">Reservations 
Details</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="search2()">Price Search</button>
<button mat-menu-item (click)="navigate()">Reservations List</button>
</mat-menu>

.hotel-component-ts

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

.reservationdetail-component- html

<p>Hello World!</p>   

.app-routing-module-ts

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

.app-component- html

 <div class='container-fluid'>
 <div class='row'>
    <div class='col-sm-3'>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>
</div>

Answer 1

альтернативно, вы можете просто использовать директиву routerLink:

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

Answer 2

Если вы продолжаете видеть "детали бронирования работает!" даже если вы изменили содержимое файла html, это известная ошибка Angular ng serve. Просто перезапустите сервер разработки, и все будет хорошо.

Answer 3

вам нужно изменить его на / bookingdetail, так как он находится на том же уровне, что и отель, вам нужно перейти от root с помощью /

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