Angular : header 搜索表单未加载多次

Question

我有 header 搜索图标，点击时会显示输入和按钮的小弹出窗口。如果用户搜索任何输入，那么我会将用户重定向到结果页面。我有单独的 header 组件和搜索结果。我正在将带有公共服务的搜索输入从 header 传递到搜索结果。

这是第一次运行良好。当我输入新文本并进行搜索时，什么也没有发生。它不会将搜索输入传递给搜索结果组件，也不会再次加载搜索结果。

header模板html

  <a
          #closeSearchForm
            href="#"
            data-title="Search"
            class=""
            id="dropdownMenuButton1"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
            ><img src="assets/images/icons/search.png" alt=""
          /></a>
          <span class="tooltiptext">Search</span>
          <div
            class="member_login search_menu_dropdown dropdown-menu"
            aria-labelledby="dropdownMenuButton1"
          >
            <form [formGroup]="searchForm" (ngSubmit)="onSubmitSearch()"> 
              
              <div class="search_menu_wrap">
                <div class="form-group">
                  <input
                  
                    type="text"
                    class="form-control"
                    placeholder="Search here...."
                    formControlName="searchInput"
                    [ngClass]="{ error_border: submitted1 && sf.searchInput.errors }"
                  />
                  <div *ngIf="submitted1 && sf.searchInput.errors" class="text-danger">
                    <div *ngIf="sf.searchInput.errors.required">Search text is required</div>
                    
                  </div>
                </div>
                <div class="form-group">
                  <button class="btn" type="submit">
                  Search</button>
                </div>
              </div>
            </form>
          </div>

header ts代码

 onSubmitSearch() {
    this.submitted1 = true;
    if (this.searchForm.invalid) {
      this.loading1 = false;
      return;
    }

    this.loading1 = true;
    if (this.sf.searchInput.value) {
      this.closeSearchForm.nativeElement.click();
      var searchValue = this.sf.searchInput.value;
      //   this.searchForm.reset();

      // Object.keys(this.searchForm.controls).forEach(key => {
      //   this.searchForm.get(key).setErrors(null) ;
      // });
      this.commonModelService.data = searchValue;
      this.router.navigate(['search-results']);
    }
  }

通用模型服务代码-用于传递搜索输入

import { Injectable } from '@angular/core';

@Injectable()
export class CommonModelService{
  data:any
}

搜索结果组件 ts

ngOnInit(): void {
   
    this.searchValue = this.commonModelService.data;
    this.getSearchResults();  <!-- this function will call api and show data in html -->
  }

我不明白哪里出了问题。现在它只是第一次工作。搜索应该可以在任何时候使用用户提供的任何输入。

当用户尝试搜索时，将搜索输入从 header 组件传递到搜索组件并实现搜索功能在任何页面上随时可用的最佳解决方案是什么？

请多多指教。谢谢

Answer 1

如果您已经在搜索结果中，您的重定向代码将不会重新呈现组件，如果不重新呈现，您的 search.result.component-> ngOninit 将不会触发并加载结果。

与其直接传递数据，不如传递可观察对象和行为对象。

搜索结果组件 ts

ngOnInit(): void {
    this.commonModelService.search$.subscribe((searchInput) => {
 if(searchInput !=== undefined){ // we want to capture empty string
 this.getSearchResults()
 }
})
 
  }

通用模型服务代码 - 用于传递搜索输入

import { Injectable } from '@angular/core';

public search$ = new BehaviorSubject(undefined) // if undefined initially we don't do anything.
@Injectable()
export class CommonModelService{
  data:any
}

BehavourSubect 将在第一次订阅时 return 最后一个事件值，在随后的情况下，当您已经在页面上时，它将像常规主题一样推送值。建议：每次在 OnDistory

上也删除订阅

this.commonModelService.search.next(searchValue);
  this.router.navigate(['search-results']);

Angular : header 搜索表单未加载多次

Angular : header search form does not load multiple times

forms

search

parameter-passing

angular