Angular中<select>选中选项后无法跳转至指定URL问题求助

以下是几个可能导致问题的原因及对应的修复方案：

1. 未注入Router服务 #

组件中调用了this.router进行导航，但如果没有在构造函数中注入Router服务，会导致导航方法无法执行。需要在组件中导入并注入Router：

import { Router, UrlTree } from '@angular/router';

// 在组件类的构造函数中注入
constructor(private router: Router) {}

2. 冗余的@ViewChild装饰器 #

模板中已经通过(change)事件直接传递了选中的value值，组件中定义的@ViewChild('selectElement')完全没有作用，反而可能引发不必要的错误，直接删除即可。

3. 参数类型错误 #

TypeScript中应使用原始类型string而非包装对象String，修改redirectToUrl的参数类型：

redirectToUrl(url: string) {
  if (url){
    const urlTree: UrlTree = this.router.createUrlTree([url]);
    this.router.navigateByUrl(urlTree);
  }
}

4. 单个选项无法触发change事件 #

当前模板中只有一个<option>，页面加载时该选项默认处于选中状态，再次选择不会触发change事件。需要添加一个默认占位选项，同时可以用$event.target.value简化写法：

<select (change)="redirectToUrl($event.target.value)">
  <option value="">请选择操作</option>
  <option value="/add-product">Add a product</option>
</select>

修复后的完整代码 #

HTML部分：

<select (change)="redirectToUrl($event.target.value)">
  <option value="">请选择操作</option>
  <option value="/add-product">Add a product</option>
</select>

组件.ts部分：

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

@Component({
  selector: 'app-your-component', // 替换为你的组件选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent { // 替换为你的组件类名
  constructor(private router: Router) {}

  redirectToUrl(url: string) {
    if (url) {
      const urlTree: UrlTree = this.router.createUrlTree([url]);
      this.router.navigateByUrl(urlTree);
    }
  }
}

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