通过routerLink向子组件传递父组件数据时遇错误

嘿，我来帮你搞定这个路由传参的问题！你遇到的错误大概率是因为路由配置里没定义参数占位符，或者子组件没正确处理传递的参数，咱们一步步排查解决：

1. 先检查并修改路由配置 #

首先，你需要在路由模块（通常是app-routing.module.ts）里，给目标路由添加参数占位符。原来的路由应该是没有参数的，现在要更新成带参数的形式：

原来的路由配置（错误示例）： #

const routes: Routes = [
  // ...其他路由项
  { path: 'modify-alias-detail', component: ModifyAliasDetailComponent }
];

修改后的路由配置（正确示例）： #

const routes: Routes = [
  // ...其他路由项
  // 用`:aliasName`定义参数占位符，名字可以和你传递的参数对应
  { path: 'modify-alias-detail/:aliasName', component: ModifyAliasDetailComponent }
];

这里的:aliasName是路由参数的占位符，Angular会把你传递的aliasName.value映射到这个位置，这样路由才能正确识别跳转路径。

2. 在子组件中接收路由参数 #

接下来，子组件需要通过ActivatedRoute来获取传递过来的参数，推荐用响应式的paramMap方式（兼容Angular最新版本）：

子组件TS代码示例： #

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

@Component({
  selector: 'app-modify-alias-detail',
  templateUrl: './modify-alias-detail.component.html',
  styleUrls: ['./modify-alias-detail.component.css']
})
export class ModifyAliasDetailComponent implements OnInit {
  // 存储接收的别名参数
  receivedAlias: string | null = null;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 订阅参数变化（适合参数可能动态更新的场景）
    this.route.paramMap.subscribe(params => {
      this.receivedAlias = params.get('aliasName');
      console.log('接收到的别名:', this.receivedAlias);
      // 这里可以添加你的业务逻辑，比如根据别名加载对应数据
    });

    // 如果确定参数不会动态变化，也可以用snapshot一次性获取
    // this.receivedAlias = this.route.snapshot.paramMap.get('aliasName');
  }
}

3. 验证传递的参数是否有效 #

还要确保你传递的aliasName.value不是undefined或null，可以在父组件模板里临时添加调试代码，确认参数值：

<!-- 父组件模板中添加调试输出 -->
<p>当前要传递的别名: {{ aliasName.value }}</p>
<button class="button" [routerLink]="['/modify-alias-detail', aliasName.value]">Next</button>

如果aliasName.value为空，也可能导致路由跳转失败，所以要确保这个表单控件（假设是FormControl）有有效值。

最后验证 #

修改路由配置后，建议重启Angular开发服务（有时候路由配置变更需要重启才能生效），然后点击按钮，应该就能正常跳转且子组件能接收到参数了。

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