刷新角度组件

Question

I have a search component which is a popup on my home page. After opening the popup and then clicking the search button I call this service below called searchMc. This is the search component.

  import {Component, OnInit, EventEmitter, Input, Output} from '@angular/core';
import {McService} from '../../shared/services/mc-service';
import {SearchModel, SearchResultModel, WebSearchModel} from './search-model';
import {Router} from '@angular/router';
import {CommunicationService} from '../../shared/services/communication.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.less'],
})
export class SearchComponent implements OnInit {
  @Input() search: boolean;
  @Output() searchChange = new EventEmitter<boolean>();
  storiesAndMedia: boolean;
  stories: boolean;
  media: boolean;
  loader: boolean;
  result: any;

  searchModelData = new SearchModel();
  searchResultResponse = new SearchResultModel();


  constructor(private mcService: McService, private router: Router, private cs: CommunicationService) {
  }

  ngOnInit() {
    this.getSearch();
  }


  getSearch() {
    this.mcService.getSearch()
      .subscribe((response) => {
          this.searchModelData = response;
          this.searchModelData.searchModel = new WebSearchModel();
        },
        (error) => {
          console.log(error);
        });
  }

  selectMedia(index) {
    switch (index) {
      case 1:
        this.searchModelData.searchModel.images = !this.searchModelData.searchModel.images;
        break;
      case 2:
        this.searchModelData.searchModel.video = !this.searchModelData.searchModel.video;
        break;
      case 3:
        this.searchModelData.searchModel.document = !this.searchModelData.searchModel.document;
        break;
      case 4:
        this.searchModelData.searchModel.audio = !this.searchModelData.searchModel.audio;
        break;
    }
  }

  customChecked(custom) {
    custom.marked = !custom.marked;
    const index1 = this.searchModelData.searchModel.customCategoryIds.indexOf(custom);
    if (custom.marked) {
      this.searchModelData.searchModel.customCategoryIds.push(custom.id);
    }
    else {
      this.searchModelData.searchModel.customCategoryIds.splice(index1, 1);
    }
  }

  categoryChecked(category) {
    category.checked = !category.checked;
    const index2 = this.searchModelData.searchModel.mainCategoryIds.indexOf(category);
    if (category.checked) {
      this.searchModelData.searchModel.mainCategoryIds.push(category.id);
    }
    else {
      this.searchModelData.searchModel.mainCategoryIds.splice(index2, 1);
    }
  }

  all() {
    this.searchModelData.searchModel.images = true;
    this.searchModelData.searchModel.video = true;
    this.searchModelData.searchModel.document = true;
    this.searchModelData.searchModel.audio = true;
    this.searchModelData.searchModel.media = !this.searchModelData.searchModel.media;
    this.searchModelData.searchModel.stories = !this.searchModelData.searchModel.stories;
    this.storiesAndMedia = !this.storiesAndMedia;
    this.stories = false;
    this.media = false;
  }

  mediaActive() {
    this.storiesAndMedia = false;
    this.media = !this.media;
    this.stories = false;
    this.searchModelData.searchModel.media = true;
    this.searchModelData.searchModel.stories = false;
  }

  storiesActive() {
    this.searchModelData.searchModel.images = false;
    this.searchModelData.searchModel.video = false;
    this.searchModelData.searchModel.document = false;
    this.searchModelData.searchModel.audio = false;
    this.storiesAndMedia = false;
    this.stories = !this.stories;
    this.media = false;
    this.searchModelData.searchModel.media = false;
    this.searchModelData.searchModel.stories = true;
  }


  brandChecked(brand) {
    brand.checked = !brand.checked;
    const index = this.searchModelData.searchModel.subClientIds.indexOf(brand);
    if (brand.checked) {
      this.searchModelData.searchModel.subClientIds.push(brand.id);
    }
    else {
      this.searchModelData.searchModel.subClientIds.splice(index, 1);
    }
  }

  searchMc() {
    this.loader = true;
    this.closeSearch();
    this.mcService.searchMc(this.searchModelData.searchModel)
      .subscribe((response) => {
          localStorage.clear();
          this.searchResultResponse = response;
          localStorage.setItem('result', JSON.stringify(this.searchResultResponse));
          this.router.navigateByUrl('/results');
          this.loader = false;
        },
        (error) => {
          console.log(error);
        });

  }

  closeSearch() {
    this.searchChange.emit(false);
  }
}

This is the result Component:

import {Component, OnInit} from '@angular/core';
import {McService} from '../../shared/services/mc-service';
import {Router} from '@angular/router';
import {CommunicationService} from '../../shared/services/communication.service';

@Component({
  selector: 'app-results',
  templateUrl: './results.component.html',
  styleUrls: ['./results.component.less']
})
export class ResultsComponent implements OnInit {
  result: any;
  autoplay: boolean;
  mediaId: number;
  popup: boolean;
  loader: boolean;
  storyId: number;

  constructor(private mcService: McService, private router: Router, private cs: CommunicationService) {
  }

  ngOnInit(): void {

    if (localStorage.getItem('result') != null) {
      this.result = JSON.parse(localStorage.getItem('result'));
    }
  }

  readMore(id) {
    window.scrollTo(0, 0);
    sessionStorage.setItem('storyId', JSON.stringify(id));
    this.mcService.addViewToNews(id)
      .subscribe((response) => {

        },
        (error2 => {
          console.log(error2);
        }));
    this.router.navigate(['/newsdetail/' + id]);
  }

  openDropdown(id) {
    for (const x of this.result.stories) {
      if (x.storyId === id) {
        x.dropdown = !x.dropdown;
      }
    }
  }


  openMediaPopup(id) {
    this.autoplay = false;
    this.mediaId = id;
    this.popup = true;
    this.mcService.addViewToMedia(id);
  }

  openMediaPopupAutplay(id) {
    this.autoplay = true;
    this.mediaId = id;
    this.popup = true;
    this.mcService.addViewToMedia(id);
  }
}

Then I get redirected to /results . But I have a problem. When I am on that same route /results if I click on search popup, then search button which calls the service again, the /results page doesn't refresh the content, because I am on that same route and since I am sending the response of the search through localstorage (I did this because I didn't know any other way) all of the results are stored on localstorage but the results page doesn't get the new content it stays the same. Is there a way to refresh the page every time I click Search button but without using localstorage. I've tried some kind of a communication service using Subject it was buggy didn't really work.

Thank you and sorry for my bad english.

Answer 1

You have to use a service. Here is an example:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';


@Injectable()
export class StorageService {

    private searchItem: BehaviorSubject<string> = new BehaviorSubject('');

    constructor() { }

    getSearchItem(): Observable<string> {
        return this.searchItem.asObservable();
    }

    getSearchItemValue(): string {
        return this.searchItem.getValue();
    }

    setSearchItem(val: string) {
        this.searchItem.next(val);
    }
}

In your ResultComponent subscribe to this service and have your local variable that provides the value updated whenever the value inside the service changes.

Attention! The value can be whatever you want. It has not strictly to be a string. This is just for the example.

import {StorageService} from 'storage.service.ts';

constructor(
 private storageService: StorageService
){}

ngOnInit(): void {
    // Update with every change
    this.storageService.getSearchTerm().subscribe(term => {
        this.result = term; 
    });
}

And your SearchComponent has to set the value to the StorageSevice after each search instead of putting it to the local storage

import {StorageService} from 'storage.service.ts';

constructor(
 private storageService: StorageService
){}


this.mcService.searchMc(this.searchModelData.searchModel)
  .subscribe((response) => {
      this.searchResultResponse = response;

     this.storageService.setSearchItem(JSON.stringify(this.searchResultResponse));

      this.router.navigateByUrl('/results');
    },
    (error) => {
      console.log(error);
    });

Answer 2

This is another example(!), maybe not the equivalent solution according to the type of your object. It's just supposed to show you that your service can handle every type of object.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';


@Injectable()
export class StorageService {

    private searchItem: BehaviorSubject< SearchResultResponse > = new BehaviorSubject(any);

    constructor() { }

    getSearchItem(): Observable<any> {
       return this.searchItem.asObservable();
    }

    getSearchItemValue(): SearchResultResponse {
       return this.searchItem.getValue();
    }

    setSearchItem(val: any) {
        this.searchItem.next(val);
    }
}