如何在Angular中实现页面/组件重定向？

我来帮你梳理下当前Angular组件跳转的实现问题，结合你的代码给出调整建议：

1. 路由配置修正（app-routing.module.ts） #

你当前的路由配置里有个关键错误：redirectTo: '/AppComponent' 指向的是组件类名，而路由路径应该对应你定义的路由path值。如果想让根路径默认跳转到某个组件，需要调整目标路径为已配置的路由：

import { RoleComponent } from './role/role.component';
import { AppComponent } from './app.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 示例：默认跳转到role组件，或者你可以给AppComponent配置专属路由后指向对应path
  { path: '', redirectTo: '/role', pathMatch: 'full' }, 
  { path: 'role', component: RoleComponent },
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

2. 导航链接优化（top-header.component.html） #

href="#"会干扰Angular的routerLink跳转逻辑，建议直接移除，让routerLink单独负责路由跳转：

<ul class="navbar-nav mr-auto">
  <li class="nav-item">
    <a class="nav-link" href="#">Verified</a>
  </li>
  <li class="nav-item">
    <!-- 移除href="#"，仅保留routerLink -->
    <a routerLink="/role" class="nav-link">ROLES</a>
  </li>
</ul>

3. 根组件模板确认（AppComponent.html） #

你的根组件模板结构是正确的，router-outlet作为路由组件的渲染出口，放在导航栏之后的位置没问题：

<div class="container p-md-0">
  <app-top-header></app-top-header>
  <router-outlet></router-outlet>
  <app-main-contain></app-main-contain>
</div>

最后别忘了确认AppModule中已经导入了AppRoutingModule，这样路由配置才能正常生效。

内容的提问来源于stack exchange，提问作者Dhrupal Suthar