Угловая повторная выборка данных после изменения параметра GET-запроса

Question

Как повторно получить данные после изменения параметра с: oglas / 1 на oglas / 2 по щелчку, чтобы при вводе URL-адреса и затем при нажатии кнопки ВВОД все работало, но при нажатии на кнопку oglas / 2 при отображении URL-адреса oglas / 1изменяется на oglas / 2, но данные из oglas / 1?

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

Понял ...

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

Спасибо всем за ваши усилия!

Answer 2

Поскольку вы выполняете вызов API для данных в ngOnInit(), запрошенные данные могут быть недоступны к моменту загрузки компонента.И 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;
  }
}

Это обеспечиваетчто у вас есть последние и соответствующие данные до загрузки компонента.