Angular 12如何通过routerLink跳转至其他组件的指定标签页

你之前的写法存在两个核心问题：

• 错误将查询参数直接拼接在routerLink的路径段中，Angular会把整段字符串当成路由路径匹配，既无法命中目标路由，也不会识别携带的参数
• Enquiries组件没有处理路由传入的参数逻辑，即使参数传递正确，组件初始化时也不会自动切换到目标标签

按以下三步修改即可实现需求： #

1. 修正Dashboard组件的跳转传参写法 #

routerLink的路径数组只放路由路径，查询参数通过单独的queryParams绑定传递，修改后代码：

<a class="hvr-icon-forward" [routerLink]="['/app/Snow']" [queryParams]="{activeTab: 'history'}">
  <span class="setup-profile-button">Show all enquiries</span>
  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="hvr-icon">
    <path d="M-4.43075e-07 10.1364L-3.4373e-07 7.86364L13.6364 7.86364L7.38636 1.61364L9 -3.93402e-07L18 9L9 18L7.38636 16.3864L13.6364 10.1364L-4.43075e-07 10.1364Z" fill="white"></path>
  </svg>
</a>

跳转后生成的地址为/app/Snow?activeTab=history，可以正常匹配路由。 #

2. 修改Enquiries组件的TS逻辑 #

引入ActivatedRoute读取路由参数，在组件初始化阶段判断参数值，自动调用已有的SelectForm方法切换标签，同时新增当前激活标签的状态变量，解决硬写active类导致的高亮不同步问题：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-enquiries',
  templateUrl: './enquiries.component.html'
})
export class EnquiriesComponent implements OnInit {
  // 保留你原有组件的属性，例如selectedLanguageCode、welcomePopup等
  currentActiveTab = 'NewForm'; // 默认激活新咨询标签

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 订阅路由参数变化，处理标签初始激活逻辑
    this.route.queryParams.subscribe(params => {
      if (params['activeTab'] === 'history') {
        this.SelectForm('ViewRequests');
        return;
      }
      this.SelectForm('NewForm');
    });
  }

  SelectForm(formType: string) {
    this.currentActiveTab = formType;
    // 保留你原有SelectForm方法中切换视图的全部逻辑
  }
}

3. 调整Enquiries组件模板的类绑定 #

把原来硬编码在标签和内容面板上的active类，改成根据currentActiveTab的值动态绑定，保证标签高亮和显示内容同步：

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" [class.active]="currentActiveTab === 'NewForm'" id="register">
    <a href="#new-tab" aria-controls="register" role="tab" data-toggle="tab" (click)="SelectForm('NewForm')">{{"New"|TextByLanguage:welcomePopup:"SUP2146":selectedLanguageCode}}</a>
  </li>
  <li role="presentation" [class.active]="currentActiveTab === 'ViewRequests'" id="regionInfo">
    <a href="#history-tab" aria-controls="regionInfo" role="tab" data-toggle="tab" (click)="SelectForm('ViewRequests')">{{"History"|TextByLanguage:welcomePopup:"SUP2147":selectedLanguageCode}}</a>
  </li>
</ul>

<div role="tabpanel" class="tab-pane" [class.active]="currentActiveTab === 'NewForm'" id="new-tab">
  <!-- 原有新咨询标签内容保留 -->
</div>

<div role="tabpanel" class="tab-pane" [class.active]="currentActiveTab === 'ViewRequests'" id="history-tab">
  <!-- 原有历史标签内容保留 -->
</div>

该方案支持用户刷新页面后依然保持目标标签激活状态，如果不需要地址栏显示参数，可以换成路由的state传参方式，但queryParams是兼容性、可维护性更好的选择。

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