Angular调用route.navigate报错Property 'route' does not exist on type

问题根因 #

你代码中存在两个问题共同导致运行报错：

• 构造函数中声明的ActivatedRoute类型参数route未添加访问修饰符，它仅会作为构造函数的局部参数存在，不会被挂载为组件类的实例属性，因此在onSubmit方法中通过this.route访问时会报属性不存在的错误。之前构造函数内读取查询参数的逻辑能正常运行，是因为你直接使用了局部参数route，没有通过this访问。
• navigate路由跳转方法不属于ActivatedRoute类，该类仅用于读取当前路由相关信息，路由跳转需要使用Router类的实例调用。

解决步骤 #

1. 从@angular/router包中导入Router类

import { ActivatedRoute, Router } from "@angular/router";

2. 修改构造函数参数声明，给ActivatedRoute参数添加访问修饰符，同时注入Router实例

constructor(
  public fb: FormBuilder,
  private route: ActivatedRoute, // 加private修饰符，将route挂载为类实例属性
  private router: Router, // 新增注入Router实例
  private http: HttpClient,
  private toastr: ToastrService
) { 
  // 原有构造逻辑无需修改
  this.changePasswordForm = this.fb.group({
    // 原有表单配置
  }, {  validator: ConfirmedValidator('password', 'password_confirmation') })
  this.route.queryParams.subscribe((params) => {
    this.changePasswordForm.controls['passwordToken'].setValue(params['token']);
  })
}

3. 修改onSubmit方法的跳转逻辑，使用Router实例调用跳转方法

onSubmit(){
  this.router.navigate(['home']);
}

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