Question

我对Angular布线有疑问。我正在尝试使用参数从一个页面重定向到另一页面，因此我的浏览器尝试将其重定向到此链接： 'http://localhost:4200/resumes/%5Bobject%20Object%5D/edit' 而不是这个'http://localhost:4200/resumes/21/edit'。

app-routing.module.ts

select x.*
from
(
    select item, count(*) cnt
    from table
    where <date time filter>
    group by item
    order by 2 desc
) x
where rownum < 2

component.ts

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

user.service.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`]);
        });
  }
}

我试图这样重定向，但得到相同的结果：

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);
    }
  }
}

this.router.navigate(['resumes', id, 'edit']);是普通的字符串属性，而不是对象。 id方法返回数字，因此我使用了AddUser方法将其设为字符串。

Answer 1

由于您的回复为：GL_LESS

您应该使用（值的resumeId并将其用于导航）：

{"resumeId":31}

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

1 个答案: