Angular中如何通过routerLink设置组件@Input参数？

直接在<a>标签上绑定[username]无法传递给路由加载的组件，因为@Input()仅适用于组件嵌套引用（比如<app-user-detail [username]="xxx"></app-user-detail>），而路由跳转是由Angular Router实例化目标组件，不属于父组件传参场景，所以原方法无效。

以下是三种可行的解决方案：

方案1：动态路由参数（参数显示在路径中） #

• 配置带参数的路由

// app-routing.module.ts
const routes: Routes = [
  { path: 'userDetail/create/:username', component: UserDetailComponent }
];

• 使用routerLink传递参数

<!-- 字符串插值写法 -->
<a routerLink="/userDetail/create/{{username}}" class="btn btn-success">create</a>
<!-- 数组绑定写法（推荐，支持动态值） -->
<a [routerLink]="['/userDetail/create', username]" class="btn btn-success">create</a>

• 在目标组件中获取参数

// user-detail.component.ts
import { ActivatedRoute } from '@angular/router';
import { OnInit } from '@angular/core';

export class UserDetailComponent implements OnInit {
  username!: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 订阅参数变化（适用于组件复用场景）
    this.route.paramMap.subscribe(params => {
      this.username = params.get('username')!;
    });
    // 组件不复用时可直接取快照
    // this.username = this.route.snapshot.paramMap.get('username')!;
  }
}

方案2：查询参数（参数在URL的?后缀中） #

适合参数可选或不想占用路径主段的场景：

• 路由保持原有配置

// app-routing.module.ts
const routes: Routes = [
  { path: 'userDetail/create', component: UserDetailComponent }
];

• 用queryParams传递参数

<a [routerLink]="['/userDetail/create']" [queryParams]="{ username: username }" class="btn btn-success">create</a>

• 在目标组件中获取参数

// user-detail.component.ts
import { ActivatedRoute } from '@angular/router';
import { OnInit } from '@angular/core';

export class UserDetailComponent implements OnInit {
  username!: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParamMap.subscribe(params => {
      this.username = params.get('username')!;
    });
    // 组件不复用时可直接取快照
    // this.username = this.route.snapshot.queryParamMap.get('username')!;
  }
}

注意：不要直接解析URL获取参数，通过ActivatedRoute的queryParamMap是官方推荐方式，能自动处理编码等问题。

方案3：路由状态传递（参数不显示在URL中） #

适合传递不想暴露的临时参数，刷新页面后状态会丢失：

• 路由无需额外配置
• 用state传递参数

<a [routerLink]="['/userDetail/create']" [state]="{ username: username }" class="btn btn-success">create</a>

• 在目标组件中获取参数

// user-detail.component.ts
import { ActivatedRoute } from '@angular/router';
import { OnInit } from '@angular/core';

export class UserDetailComponent implements OnInit {
  username!: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 获取快照状态
    this.username = this.route.snapshot.state.username;
    // 需监听浏览器前进后退时，可订阅路由事件
    // this.route.events.subscribe(event => {
    //   if (event instanceof NavigationStart) {
    //     this.username = this.route.snapshot.state.username;
    //   }
    // });
  }
}

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