Angular中<app-header>组件内a标签失效问题求助

Angular的单页路由依赖RouterModule提供的RouterLink指令拦截链接点击事件，实现无刷新跳转。你的<app-header>组件所在模块未导入RouterModule，导致组件内的路由链接指令无法生效；若使用原生<a href>标签，会触发浏览器全页面刷新，而前端路由未配置对应服务器 fallback 的话，就会出现无反应或跳转失败。而app.component所在的根模块已导入RouterModule.forRoot()，所以根组件内的链接能正常工作。

推荐方案：使用Angular路由指令 #

1. 在<app-header>组件所属的功能模块（比如HeaderModule）中导入RouterModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HeaderComponent } from './header.component';

@NgModule({
  declarations: [HeaderComponent],
  imports: [
    CommonModule,
    RouterModule
  ],
  exports: [HeaderComponent]
})
export class HeaderModule { }

2. 将组件内的<a>标签替换为routerLink指令：

<a routerLink="/user-list">user list</a>

3. 可选：添加激活状态样式（路由匹配时自动添加类）：

<a routerLink="/user-list" routerLinkActive="active-link">user list</a>

不推荐方案：使用原生<a>标签（会刷新页面） #

若坚持用原生链接，需配置服务器的 fallback 策略，让所有请求指向Angular的index.html，同时可切换到HashLocationStrategy（在根模块路由配置中添加）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [/* 你的路由配置 */];

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

这种方式会在URL中添加#避免服务器路由冲突，但会破坏单页应用的无刷新体验，不建议使用。

内容的提问来源于stack exchange，提问作者no name