从route.params.subscribe获取值，给出“无法读取未定义的属性”

Question

我正在尝试创建一个页面，该页面将向我的后端发出请求以激活其 URL 接收到的“userId”，它可以工作，但会出现错误，我找不到原因，也找不到如何解决此问题.

我的组件：

import { Component, OnInit } from '@angular/core';
import { ResetPasswordService } from './reset-password.service';
import { CommonModule } from '@angular/common';
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { MatFormFieldModule } from '@angular/material/form-field';

@Component({
  selector: 'app-reset-password',
  templateUrl: './reset-password.component.html',
  styleUrls: ['./reset-password.component.css'],
  standalone: true,
  imports: [
    MatFormFieldModule,
    MatDialogModule,
    ReactiveFormsModule,
    CommonModule,
    FormsModule,
  ]
})
export class ResetPasswordComponent {

  resetData = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', Validators.required),
    confirmPassword: new FormControl('', [Validators.required]),
  });

  resetDto!: { email: string, password: string, resetCode: string | null, userId: string | null };

  isVerified = false;

  constructor(public resetPasswordService: ResetPasswordService, private route: ActivatedRoute, public router: Router) {
    this.route.params.subscribe(params => {
      if (params['userId'] != null) {
        this.resetPasswordService.verifyUser(params['userId']).then(response => {
          this.isVerified = response;
        });
      }
    });
   }
}

但事实是，它有效！我的后端正确接收带有“userId”的请求，但角度给了我这个错误：

reset-password.service.ts:25 ERROR TypeError: Cannot read properties of undefined (reading 'userId')
at ResetPasswordComponent_Template (reset-password.component.html:2:7)
at ReactiveLViewConsumer.runInContext (core.mjs:10425:13)
at executeTemplate (core.mjs:10966:22)
at refreshView (core.mjs:12487:13)
at detectChangesInView (core.mjs:12651:9)
at detectChangesInComponent (core.mjs:12627:5)
at detectChangesInChildComponents (core.mjs:12665:9)
at refreshView (core.mjs:12537:13)
at detectChangesInView (core.mjs:12651:9)
at detectChangesInEmbeddedViews (core.mjs:12595:13)

这是我的服务：

import { Injectable } from '@angular/core';
import { AppService } from '../app.service';
import { firstValueFrom } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ResetPasswordService {

  constructor(public appService: AppService) { }

  resetPassword(resetDto: { email: string, password: string }): Promise<boolean> {
    let result = firstValueFrom(this.appService.PUT<boolean>(`users/reset-password`, resetDto )).then(resetResult => {
      return resetResult;
    }, error => {
      return error.status;
    });
    return result;
  }

  verifyUser(userId: string): Promise<boolean> {
    // This is line 25
    let result = firstValueFrom(this.appService.GET<boolean>(`users/verify?userId=${userId}` )).then(resetResult => {
      return resetResult;
    }, error => {
      return error.status;
    });
    return result;
  }
}

我是 Angular 16 的新手，所以我不知道我做错了什么。看起来“params”中的值仍未加载，因为当我尝试将其值保存到“this.resetDto”变量时，它给出了相同的错误，但是我可以为它做“等待”吗？

Answer 1

你可以这样尝试吗

 constructor(public resetPasswordService: ResetPasswordService, private route: ActivatedRoute, public router: Router) {
    this.route.params.subscribe(params => {
      if (params?.userId != null) {
        this.resetPasswordService.verifyUser(params.userId).then(response => {
          this.isVerified = response;
        });
      }
    });
   }