Angular中routerLink第二个参数返回undefined而非预期值的问题求助

看起来你遇到的问题核心是组件类未正确声明双向绑定的变量，导致routerLink无法获取到输入框的值，另外路径写法也可能和你预期的相对路径不符，下面一步步给你拆解：

1. 最关键的问题：未在组件类中初始化searchedValue #

Angular的ng-model双向绑定要求组件类中必须存在对应的属性，否则模板里的searchedValue只是模板局部作用域的临时变量，组件类（以及routerLink绑定的表达式）根本访问不到它，自然就会出现undefined。

解决方法： #

打开你的组件.ts文件，添加并初始化这个变量：

import { Component } from '@angular/core';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponentName {
  // 初始化空字符串，避免初始值为undefined
  searchedValue: string = '';
}

2. 路径写法的小问题：绝对路径 vs 相对路径 #

你期望跳转的是../search/[输入值]（相对路径），但当前代码里的['/search', searchedValue]是绝对路径（开头的/表示从根路由开始）。如果你的路由结构中，当前组件所在路由是某个子路由（比如/foo），绝对路径会跳转到/search/xxx，而不是../search/xxx。

调整路径的方法： #

如果要使用相对路径，去掉开头的/，写成：

<button [routerLink]="['../search', searchedValue]" routerLinkActive="is-active">search</button>

注意：这种写法的前提是你的路由配置中，当前组件的路由和search路由处于正确的层级关系，确保../能正确指向目标路由的父级。

3. 可选优化：用点击事件手动导航（更可控） #

如果你想对输入值做校验（比如不能为空），或者避免初始状态下routerLink绑定undefined的情况，可以改用点击事件手动触发导航：

模板代码： #

<input type="text" placeholder="Search" ng-model="searchedValue">
<button (click)="handleSearch()" routerLinkActive="is-active">search</button>

组件类代码： #

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  // 组件元数据
})
export class YourComponentName {
  searchedValue: string = '';

  constructor(private router: Router) {}

  handleSearch() {
    // 可以添加校验，比如输入为空时不跳转
    if (!this.searchedValue.trim()) {
      alert('请输入搜索内容');
      return;
    }
    // 用相对路径导航，根据你的路由结构调整路径数组
    this.router.navigate(['../search', this.searchedValue]);
  }
}

这样不仅能解决undefined的问题，还能提升用户体验~

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