Angular首页搜索弹窗组件调用searchMc服务技术咨询

Hey there! Let's break down how to complete and polish this Angular search popup component, especially getting the search functionality working with your McService (you mentioned calling searchMc on button click). Here are key steps and fixes based on your code snippet:

1. Implement the Search Button Click Handler #

Your current code doesn't include the method to trigger the search—let's add that to call your searchMc service method, handle loading state, and process results:

onSearch(): void {
  // Enable loading state to prevent duplicate clicks
  this.loader = true;

  // Call your searchMc service method (adjust the method name if needed)
  this.mcService.searchMc(this.searchModelData.searchModel)
    .subscribe({
      next: (response: SearchResultModel) => {
        this.searchResultResponse = response;
        this.loader = false;
        
        // Optional: Send results to other components via CommunicationService
        this.cs.sendSearchResults(response);
      },
      error: (error) => {
        console.error("Search request failed:", error);
        this.loader = false;
        // Add user-facing error feedback here (e.g., toast message)
      }
    });
}

Then bind this method to your search button in search.component.html:

<button 
  (click)="onSearch()" 
  [disabled]="loader"
  class="search-btn"
>
  {{ loader ? 'Searching...' : 'Search' }}
</button>

2. Complete the selectMedia Method #

Your selectMedia function is incomplete for the video case—let's finish it and add optional mutual exclusivity if needed:

selectMedia(index: number): void {
  switch (index) {
    case 1:
      this.searchModelData.searchModel.images = !this.searchModelData.searchModel.images;
      // Optional: Uncheck video if you want only one media type selected at a time
      // this.searchModelData.searchModel.video = false;
      break;
    case 2:
      this.searchModelData.searchModel.video = !this.searchModelData.searchModel.video;
      // Optional: Uncheck images for mutual exclusivity
      // this.searchModelData.searchModel.images = false;
      break;
    // Add more cases if you have additional media types (audio, docs, etc.)
  }
}

3. Add Popup Close Logic #

Implement a method to close the popup and reset state, using your existing @Output event emitter:

closePopup(): void {
  // Notify parent component to hide the popup
  this.searchChange.emit(false);
  
  // Reset search state for next use
  this.searchModelData.searchModel = new WebSearchModel();
  this.searchResultResponse = new SearchResultModel();
  this.loader = false;
}

Add a close button in your template:

<button (click)="closePopup()" class="close-btn">×</button>

4. Improve Loading State & Result Display #

Add UI elements to show loading status and search results:

Loading Indicator (Template) #

<div *ngIf="loader" class="search-loader">
  <!-- Use a spinner or text loader -->
  <span>Loading results...</span>
</div>

Result Display (Template) #

<div *ngIf="!loader && searchResultResponse?.results?.length" class="search-results">
  <h4>Found {{ searchResultResponse.results.length }} results</h4>
  <div *ngFor="let item of searchResultResponse.results" class="result-item">
    <!-- Render based on media type -->
    <img *ngIf="item.type === 'image'" [src]="item.url" alt="{{ item.title }}" class="result-image">
    <video *ngIf="item.type === 'video'" [src]="item.url" controls class="result-video"></video>
    <p class="result-title">{{ item.title }}</p>
  </div>
</div>
<div *ngIf="!loader && searchResultResponse?.results?.length === 0" class="no-results">
  No matching results found. Try adjusting your search terms or filters.
</div>

Styling (Less) #

.search-loader {
  padding: 1rem;
  text-align: center;
  color: #666;
}

.search-results {
  margin-top: 1rem;
  .result-item {
    margin-bottom: 1rem;
    .result-image, .result-video {
      max-width: 100%;
      height: auto;
    }
    .result-title {
      margin-top: 0.5rem;
      font-weight: 500;
    }
  }
}

.no-results {
  padding: 1rem;
  color: #888;
  text-align: center;
}

5. Minor Initialization Fix #

Avoid potential undefined errors by initializing the search model earlier:

ngOnInit() {
  // Initialize search model before fetching config
  this.searchModelData.searchModel = new WebSearchModel();
  this.getSearch();
}

内容的提问来源于stack exchange，提问作者Dusan Nikodijevic