Данные не видны без перезагрузки страницы во время вызова API

Question

После входа в систему маршрут страницы перемещается в «панель управления», где http: get api call получает данные с сервера.Но он не показывает никаких данных, если страница не перезагружается.Я искал много способов решить эту проблему, но ничто не могло решить мою проблему.Может ли кто-нибудь помочь мне, что я пропустил здесь или что я должен сделать, чтобы получить данные без перезагрузки страницы?

N: B: Я использую Angular 7 в качестве моего интерфейса.

Answer 1

у вас есть два варианта решения этой проблемы

1. использовать локальное хранилище на родительской странице.

2. использовать вызов API на дочерней странице, и подписывайтесь только на полезные данные.

Я предпочитаю второй метод, потому что он очень эффективен,

шаги:

1. От родительской страницы к дочерней, вам нужно передать data.id или object.id

2. вызов API на дочерней странице и фильтрация данных с передачей data.id от родителя

поэтому, если вы перезагрузите дочернюю страницу, дочерняя страница снова попадет в API и получит данные и идентификатор из URL, которые помогут отфильтровать необходимые данные

 //parent page
 //onclick parent page navigate to child page
 //data contain id,title,info etc....
 passData(data){
    this.newsService.blogData = data;
    this.router.navigate(['/child-page',data.id]);
  }
  
  
  
  
  //api service
export class NewsService {
  public blogData:any[]=[]; //array declare
  constructor ( private http: HttpClient){ }
  fetchNews(): Observable<Object> {
      return this.http.get('api-url'); 
  }


  
 // on child page
   fetchNews(){
    this.newsservie.fetchNews().subscribe((data:any)=>{
      this.newsList = data;
      this.readmorecontent = this.newsList[this.id];
      console.log(this.readmorecontent)
    });