Angular Routing 改变了页面答案

【问题标题】：Angular Routing changes the pageAngular Routing 改变了页面
【发布时间】：2021-02-14 23:18:17
【问题描述】：

我想转到另一个页面，为此，我使用 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.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>

【问题讨论】：

标签： javascript angular typescript angular2-routing

【解决方案1】：

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

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

【讨论】：