Angular Routing 改变页面

Question

I would like to go to another page, for that I use Angular routing but the routing does not work,

I stay on the same page and the text which should be displayed on the other page (payment Component) is displayed on my (main component) why ?

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

here in header component when I click I would like to go to the Payment component page

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.component.html

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

Answer 1

You should remove <app-main></app-main> from your app.component.html , since that main component is bound to specific route and should not be visible all the time.

After you remove it, the main component should be available by /main path, and payment component by /payment path.