刷新角度组件

Question

我有一个搜索组件，它是我主页上的弹出窗口。打开弹出窗口然后单击搜索按钮后，我将此服务称为searchMc。这是搜索组件。

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

这是结果组件：

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

然后我被重定向到/results。但我有一个问题。当我在同一条路线上/results如果我点击搜索弹出窗口，然后再次调用该服务的搜索按钮，/results页面不会刷新内容，因为我在同一条路线上路由，因为我通过localstorage发送搜索的响应（我这样做是因为我不知道其他任何方式）所有结果都存储在localstorage中但结果页面没有获得新内容它保持不变。有没有办法在每次单击“搜索”按钮但不使用localstorage时刷新页面。我曾尝试使用Subject进行某种通信服务，但这种错误并没有真正发挥作用。

谢谢你，抱歉我的英语不好。

Answer 1

您必须使用服务。这是一个例子：

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

在ResultComponent中订阅此服务并使用本地变量，只要服务中的值发生更改，就会更新值。

注意！价值可以是你想要的任何东西。它并不严格地是一个字符串。这只是一个例子。

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

constructor(
 private storageService: StorageService
){}

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

您的SearchComponent必须在每次搜索后将值设置为StorageSevice，而不是将其放入本地存储

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

这是另一个例子（！），可能不是根据对象类型的等效解决方案。它只是向您展示您的服务可以处理每种类型的对象。

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