Angular路由改变页面

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

在 header 组件中单击时我想转到付款组件页面

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

您应该从 app.component.html 中删除 <app-main></app-main>，因为该主要组件绑定到特定路由，不应一直可见。

删除后，main component 应该可以通过 /main 路径访问，payment component 可以通过 /payment 路径访问。

Angular路由改变页面

Angular Routing changes the page

javascript

angular

typescript

angular2-routing