角路由器-重定向时URL错误

Question

I have problem with the Angular routing. I am trying to do redirection from one page to another with parameter and as a result my browser tries to redirect to this link: ' http://localhost:4200/resumes/%5Bobject%20Object%5D/edit ' instead of this ' http://localhost:4200/resumes/21/edit '.

app-routing.module.ts

{ path: 'resumes/:id/edit', component: EditResumeComponent } 

component.ts

import { Component, OnInit } from '@angular/core';
import { Resume } from 'src/app/models/Resume';
import { ResumeService } from 'src/app/services/resume.service';
import { Router } from '@angular/router';
import { UserService } from 'src/app/services/user.service';
import { AddUser } from 'src/app/models/AddUser';

@Component({
  selector: 'app-supply-contact-information',
  templateUrl: './supply-contact-information.component.html',
  styleUrls: ['./supply-contact-information.component.css']
})
export class SupplyContactInformationComponent implements OnInit {
  id: string;
  resume: Resume;

  constructor(
    private resumeService: ResumeService,
    private router: Router,
    private userService: UserService) { }

  ngOnInit() {
    this.resume = this.resumeService.getResume();
  }

  onSubmit() {
    this.resumeService.updateResume(this.resume);
    const addUserRequest = new AddUser(this.resume.firstName, this.resume.lastName, this.resume.email, this.resume.phone);

    this.userService.addUser(addUserRequest)
      .subscribe(value => this.id = value.toString(),
        () => {
          // TODO: On error should be implemented here!
        },
        () => {
          this.router.navigate([`/resumes/${this.id}/edit`]);
        });
  }
}

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { AddUser } from '../models/AddUser';
import { environment } from '../../environments/environment';
import { catchError, tap } from 'rxjs/operators';

const httpOptions = {
  headers: new HttpHeaders(
    {
      'Access-Control-Allow-Origin': '*',
      'Content-Type': 'application/json'
    }),
};

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = environment.apiUrl;

  constructor(private http: HttpClient) { }

  addUser(addUserQuery: AddUser): Observable<number> {
    return this.http.post<number>(`${this.apiUrl}/user`, addUserQuery, httpOptions)
      .pipe(
        tap(() => this.log(`User with email: ${addUserQuery.email} created!`, false)),
        catchError(this.handleError<any>('addUser'))
      );
  }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(`${operation}: ${error}`);
      return of(result as T);
    };
  }

  // TODO: It should be implemented better later!
  private log(message: string, showNotification: boolean) {
    if (showNotification) {
      console.log(message);
    }
  }
}

I tried to redirect like this, but getting same result:

this.router.navigate(['resumes', id, 'edit']);

id is a normal string property, not an object. The AddUser method returns number so I used the .toString() method to make it a string.

Answer 1

since you have response as: {"resumeId":31}

You should use (resumeId from value and use it for the navigation ):

this.userService.addUser(addUserRequest)
      .subscribe(value => this.id = value.resumeId.toString(),
        () => {
          // TODO: On error should be implemented here!
        },
        () => {
          this.router.navigate([`/resumes/${this.id}/edit`]);
        });