Javascript 角度路由更改页面

我想转到另一页， 为此，我使用角度布线，但布线不起作用

我停留在同一页上，而文本应显示在另一页上（支付组件） 显示在我的（主部件）上的原因是什么

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];

在标题组件中，当我单击时，我想转到付款组件页面

header.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>

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

电子书店
您应该从
app.component.html
中删除
，因为该主要组件绑定到特定路径，并且不应始终可见

删除后，
主组件
应通过
/main
路径可用，而
支付组件
应通过
/payment
路径可用