Question

参数更改后如何从以下位置重新获取数据：通过单击oglas / 1到oglas / 2，所以当放置URL而不是单击ENTER时，一切正常，但是当在显示oglas / 1时单击oglas / 2按钮时，URL更改为oglas / 2，但数据来自oglas / 1？< / p>

TS

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { Post } from "../post.model";
import { ServerService } from "../server.service";

@Component({
  selector: "post",
  templateUrl: "./post.component.html",
  styleUrls: ["./post.component.css"]
})
export class PostComponent implements OnInit {
  post: Post[];

  constructor(
    private route: ActivatedRoute,
    private serverService: ServerService
  ) {}

  ngOnInit(): void {
    this.getPost();
  }

  getPost(): void {
    const id = +this.route.snapshot.paramMap.get("id");
    this.serverService.getPosts(id).subscribe(post => (this.post = post));
  }
}

服务

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Post } from "./post.model";
import { User } from "./user.model";
import { Observable } from "rxjs";

@Injectable({ providedIn: "root" })
export class ServerService {
  usersUrl = "http://localhost:3000/users";
  postsUrl = "http://localhost:3000/posts";

  constructor(private http: HttpClient) {}

  getPosts(id: number | string): Observable<Post[]> {
    const url = `${this.postsUrl}/${id}`;
    return this.http.get<Post[]>(url);
  }

  getUser(id: number | string): Observable<User[]> {
    const url = `${this.usersUrl}/${id}`;
    return this.http.get<User[]>(url);
  }
}

Answer 1

由于您正在对ngOnInit()中的数据进行API调用，因此在加载组件时可能无法获得请求的数据。而且Angular可能正在重用该组件的同一实例，使得ngOnInit()仅被调用一次。

您可以使用Angular Resolvers来确保在加载组件之前拥有所需的数据。

1）创建一个路由解析器，以在加载路由之前获取所需的数据。

PostDataResolver.ts：

// ... imports

@Injectable()
export class PostDataResolver implements Resolve<any> {

 constructor(private serverService: ServerService) {}

 resolve(route: ActivatedRouteSnapshot) {

   const id = route.paramMap.get('id');

   return this.serverService.getPosts(id);
 }
}

2）将此解析器添加到您的路由模块中：

{ path: "oglas/:id", component: PostComponent, resolve: { postData: PostDataResolver }}

3）然后访问组件中已解析的数据。

PostComponent.ts：

export class PostComponent implements OnInit {
  post: Post[];

  constructor(
    private route: ActivatedRoute,
    private serverService: ServerService
  ) {}

  ngOnInit(): void {
    this.post = this.route.snapshot.data.postData;
  }
}

这可确保在加载组件之前，您拥有最新且适当的数据。

Answer 2

知道了...

import { Component, OnInit, OnChanges } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { Post } from "../post.model";
import { ServerService } from "../server.service";

@Component({
  selector: "post",
  templateUrl: "./post.component.html",
  styleUrls: ["./post.component.css"]
})
export class PostComponent implements OnInit {
  post: Post[];
  id: number;

  constructor(
    private route: ActivatedRoute,
    private serverService: ServerService
  ) {}

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.id = parseInt(params.get("id"));
      this.getPost(this.id);
    });
  }

  getPost(id: number): void {
    this.serverService.getPosts(id).subscribe(post => (this.post = post));
  }
}

此代码将数据重新提取到组件

ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.id = parseInt(params.get("id"));
      this.getPost(this.id);
    });
  }

谢谢大家的努力！

参数更改GET请求后，角度重新获取数据

2 个答案: