路由更改 URL 但不显示相应页面

Question

我正在尝试在页面之间导航，但它不起作用。我已经定义了路由，正在根据 Angular 文档使用 routerLink 并检查了无数 Whosebug 主题，但仍然无法正常工作。

我的项目是新的，所以我基本上只有这3个组件： _ AppComponent（其他 2 个的父级） _ WelcomePageComponent _ LandingPageComponent

这是我定义路线的app.module.ts。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { WelcomePageComponent } from './welcome-page/welcome-page.component';
import { LandingPageComponent } from './landing-page/landing-page.component';

const routes: Routes = [
  { path: '', component: AppComponent},
  { path: 'welcome', component: WelcomePageComponent },
  { path: 'landing', component: LandingPageComponent }
];

@NgModule({
  entryComponents: [
    WelcomePageComponent,
    LandingPageComponent
  ],
  declarations: [
    AppComponent,
    WelcomePageComponent,
    LandingPageComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是 html 我尝试创建一个 link 欢迎页面的地方。

<ul>
  <li>
    <a [routerLink]="['/welcome']" routerLinkActive="active">Welcome Page</a>
  </li>
</ul>


<router-outlet></router-outlet>

单击 link 时，URL 会发生变化，但页面不会发生变化。尽管显示欢迎页面内容，但我宁愿完全更改页面。

我做错了什么？

谢谢

Answer 1

您必须稍微更改设计才能实现您想要的效果。

第 1 步：创建一个 NavComponent，它将包含所有导航链接。从 AppComponent 中删除链接。它应该只包含 router-outlet 标签。

步骤 2：更新路由配置如下：

const routes: Routes = [
  { path: '', component: NavBarComponent},
  { path: 'welcome', component: WelcomePageComponent },
  { path: 'landing', component: LandingPageComponent }
];

添加了一个demo code

路由更改 URL 但不显示相应页面

Routes changes URL but doesn't display corresponding page

routing

routes

angular