Angular Routing 改變頁面

Question

我想轉到另一個頁面，為此我使用了 Angular 路由，但路由不起作用，

我停留在同一頁面上，而應該在其他頁面（支付組件）上顯示的文本顯示在我的（主要組件）上，為什么？

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './main/main.component';
import { PaymentComponent } from './payment/payment.component';

const routes: Routes = [
  { path: 'main', component: MainComponent },
  { path: 'payment', component: PaymentComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [MainComponent, PaymentComponent];

在標題組件中，當我單擊時，我想轉到付款組件頁面

頭文件.component.html

<div class="nav-content">
    <div>
        <div class="top-nav">
            <h1>E-Book Store</h1>
            <div class="top-nav-search">
                <div class="shopping-button">
                    <a routerLink="payment" routerLinkActive="active">
                        <button type="submit" class="icon">Mon Panier</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="header-content"></div>
</div>

應用程序組件.html

<app-main></app-main>
<router-outlet></router-outlet>

Answer 1

您應該從app.component.html刪除<app-main></app-main> ，因為該主要組件綁定到特定路由並且不應該一直可見。

刪除后， main component應該可以通過/main路徑使用，而payment component應該可以通過/payment路徑使用。