角路由更改页面

问题描述

我想转到另一页， 为此，我使用角度路由，但是路由不起作用，

我停留在同一页面上，而该文本应显示在另一页面上（付款部分） 显示在我的（主要组件）上为什么？

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

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

解决方法

您应该从<app-main></app-main>中删除app.component.html，因为该主要组件已绑定到特定的路线，并且应该始终不可见。

删除后，main component路径应该可用，/main路径应该payment component可用。