Angular独立子菜单组件外部链接异常：加载即跳转，点击无响应

问题根源 #

1. 页面加载自动跳转：初始化data数组时，window.open(this.url, '_blank')会立即执行，而非点击菜单项时触发，导致页面加载阶段就打开新标签页。
2. 点击无反应：window.open的返回值是Window对象，不是URL字符串，routerLink无法识别该无效值，因此点击菜单项没有任何动作。

解决方案 #

1. 修正主组件的data数组结构

直接存储原始URL字符串，移除立即执行的window.open，可新增字段标记是否为外部链接（或后续通过URL格式判断）：

url = `${ENDPOINT}files/`;

public data = [
  {
    title: 'Files',
    url: '/files',
    active: true,
    isExternal: false
  },
  {
    title: 'Storage',
    url: this.url,
    active: false,
    isExternal: true
  },
];

2. 修改子菜单组件模板，区分处理内部/外部链接

根据标记字段（或URL格式），分别用routerLink处理内部路由，用点击事件触发外部链接跳转：

<li *ngFor="let item of data; let i = index">
  <!-- 内部路由：使用routerLink -->
  <a 
    *ngIf="!item.isExternal" 
    [routerLink]="item.url" 
    routerLinkActive="active"
  >
    {{ item.title }}
  </a>

  <!-- 外部链接：绑定点击事件触发跳转 -->
  <a 
    *ngIf="item.isExternal" 
    href="javascript:void(0)" 
    (click)="openExternalLink(item.url)"
    [class.active]="item.active"
  >
    {{ item.title }}
  </a>
</li>

3. 子菜单组件添加外部链接跳转方法，调整active状态逻辑

添加点击事件方法处理跳转，并修正路由事件订阅逻辑，只处理内部路由的active状态：

import { Component, Input, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'submenu',
  templateUrl: './submenu.component.html'
})
export class SubmenuComponent implements OnDestroy {
  @Input() data: any[];
  private subs = new Subscription();

  constructor(private router: Router) {
    this.initRouteListener();
  }

  openExternalLink(url: string) {
    window.open(url, '_blank');
    // 可选：点击外部链接时标记为active
    this.data.forEach(item => item.active = false);
    const targetItem = this.data.find(item => item.url === url);
    if (targetItem) {
      targetItem.active = true;
    }
  }

  private initRouteListener() {
    this.subs.add(
      this.router.events.subscribe((link: any) => {
        if (link instanceof NavigationEnd) {
          // 只匹配内部路由的active状态
          const activeLink = this.data.find(page => page.url === link.url && !page.isExternal);
          if (activeLink) {
            this.data = this.data.map(page => ({ ...page, active: false }));
            activeLink.active = true;
          }
        }
      })
    );
  }

  ngOnDestroy() {
    this.subs.unsubscribe();
  }
}

可选：无标记字段的判断方式

如果不想新增isExternal字段，可通过URL格式判断是否为外部链接：

// 子菜单组件中添加判断方法
isExternalUrl(url: string): boolean {
  return /^https?:\/\//.test(url);
}

模板中替换*ngIf="item.isExternal"为*ngIf="isExternalUrl(item.url)"即可。

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