Angular无关联组件间传参求助：传递选中Agent值

针对你的场景，最贴合需求的是路由参数传递（和你的跳转逻辑完全匹配），同时也提供服务共享数据的方案作为补充：

方案一：路由参数传递（推荐） #

你的代码已经在使用routerLink="/lineups/brimstone"，刚好可以把agent名称作为路由参数直接传递，maps组件从路由中读取即可。

1. 配置带参数的路由 #

在路由模块（如app-routing.module.ts）中定义包含agent参数的路由：

const routes: Routes = [
  // 其他路由配置
  { path: 'lineups/:agent', component: MapsComponent }, // :agent 是动态参数
  { path: 'lineups/:agent/:map', component: /* 对应地图详情组件 */ },
];

2. 简化agents组件代码（可选） #

你现有的routerLink已经包含了agent值，selectAgent方法如果仅用于传值可以直接移除，或者保留用于其他逻辑：

<div routerLink="/lineups/brimstone"> </div>
<div routerLink="/lineups/viper"> </div>
<div class="col sova" routerLink="/lineups/sova"> </div>

3. 在maps组件中获取路由参数 #

通过ActivatedRoute读取路由参数，并用于显示和拼接URL：

// maps.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.css']
})
export class MapsComponent implements OnInit {
  selectedAgent: string = '';
  maps = [/* 你的地图数据数组 */];

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit(): void {
    // 订阅路由参数变化，获取agent值
    this.route.paramMap.subscribe(params => {
      this.selectedAgent = params.get('agent') || '';
    });
  }

  openMap(setMap: any) {
    // 使用获取到的selectedAgent拼接路由
    this.router.navigateByUrl(`/lineups/${this.selectedAgent}/${setMap}`);
    console.log(setMap);
  }
}

此时maps.html中的{{selectedAgent}}就能正常显示选中的agent名称。

方案二：共享服务传递数据（适合跨多组件共享场景） #

如果后续需要在更多组件间共享agent数据，可以创建单例服务来存储和传递值：

1. 创建共享服务 #

// agent.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AgentService {
  private selectedAgentSource = new BehaviorSubject<string>('');
  selectedAgent$: Observable<string> = this.selectedAgentSource.asObservable();

  setSelectedAgent(agent: string): void {
    this.selectedAgentSource.next(agent);
  }
}

2. 在agents组件中设置值 #

// agents.component.ts
import { AgentService } from './agent.service';

@Component({
  selector: 'app-agents',
  templateUrl: './agents.component.html',
  styleUrls: ['./agents.component.css']
})
export class AgentsComponent {
  constructor(private agentService: AgentService) {}

  selectAgent(agent: string): void {
    this.agentService.setSelectedAgent(agent);
  }
}

3. 在maps组件中订阅值 #

// maps.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { AgentService } from './agent.service';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.css']
})
export class MapsComponent implements OnInit, OnDestroy {
  selectedAgent: string = '';
  maps = [/* 你的地图数据数组 */];
  private agentSubscription!: Subscription;

  constructor(
    private agentService: AgentService,
    private router: Router
  ) {}

  ngOnInit(): void {
    // 订阅agent值的变化
    this.agentSubscription = this.agentService.selectedAgent$.subscribe(agent => {
      this.selectedAgent = agent;
    });
  }

  ngOnDestroy(): void {
    // 销毁订阅防止内存泄漏
    this.agentSubscription.unsubscribe();
  }

  openMap(setMap: any) {
    this.router.navigateByUrl(`/lineups/${this.selectedAgent}/${setMap}`);
    console.log(setMap);
  }
}

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