Angular菜单组件路由问题：点击菜单无法切换主组件内容

你的问题出在独立组件的依赖导入规则上：Angular的独立组件（standalone: true）是完全自给自足的，不会继承父组件的任何导入。你在AppComponent里导入了RouterLink和RouterLinkActive，但这些不会自动传递给MainMenuComponent，导致菜单里的路由指令无法被识别。

修复步骤 #

1. 打开MainMenuComponent的TypeScript文件（比如main-menu.component.ts）
2. 导入RouterLink和RouterLinkActive模块
3. 在组件的imports数组中添加这两个模块

修改后的MainMenuComponent代码示例：

import { Component } from '@angular/core';
// 新增路由指令的导入
import { RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  selector: 'app-main-menu',
  standalone: true,
  // 把路由指令加入到组件的依赖导入列表
  imports: [RouterLink, RouterLinkActive],
  templateUrl: './main-menu.component.html',
  styleUrl: './main-menu.component.scss'
})
export class MainMenuComponent {
  // 你的组件逻辑
}

这样修改后，菜单里的routerLink和routerLinkActive就能正常工作，点击菜单时router-outlet的内容会正确切换。

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