Angular路由跳转后页面加载但文本不显示问题求助

问题原因及修复步骤 #

1. 路由配置路径格式错误 #

Angular路由的path属性不需要以斜杠/开头，你的配置里/about和/contact的前置斜杠会导致路由匹配失败，组件无法正常加载。

修改后的路由配置：

const routes: Routes = [
  {path: '', component: IndexComponent},
  {path: 'about', component: AboutComponent},
  {path: 'contact', component: ContactComponent}
];

2. 原生href导致路由未正确激活 #

使用原生<a href>会触发页面完全刷新，虽然URL会变化，但Angular的路由组件无法正确渲染。需替换为Angular提供的routerLink指令实现单页面导航。

修改后的app.component.html导航部分：

<ul class="list-group">
    <a routerLink="/" class="list-group-item">Index</a>
    <a routerLink="/about" class="list-group-item">About</a>
    <a routerLink="/contact" class="list-group-item">Contact</a>
</ul>

额外验证 #

确保AppModule中已正确导入并配置路由模块：

import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  // 其他模块配置
})
export class AppModule { }

完成以上修改后，点击导航链接即可正常加载对应组件的页面内容。

内容的提问来源于stack exchange，提问作者abi jega