在Angular 13中使用搜索功能的正确方法

Question

任何人，请提供使用搜索功能的正确方法，应该在单独的组件中显示结果＆amp;用户输入的值无法刷新以进行进一步搜索。

这是搜索组件（PIC 1）

我在名为另一个组件的结果结果中渲染了搜索组件

。结果组件用于显示搜索数据。

我需要用户在搜索后输入值进一步进行搜索，

例如（pic 2）

用户输入的值在此图2中存在，

但在我的情况下，它不存在。我认为当结果组件加载时，它令人耳目一新。

我已经将数据传递给了使用单独服务的结果组件。现在，我将数据分为两个组件

，但是如何在输入框中显示。

搜索组件.html

<form [formGroup]="jobSearchForm" (ngSubmit)="jobSearchSubmit()">
            <div class="input-group job-group">
                <div class="input-group-btn search-panel">
                    <select class="form-select btn btn-default search-filter-btn" formControlName="versionId">
                        <option *ngFor="let version of versions" value="{{version.code}}">
                            {{version.Name}}
                        </option>
                    </select>
                </div>
                <span class="input-group-btn search-lbl">
                    <span>
                        <fa-icon [icon]="briefcase" class="job-title-ico"></fa-icon>Job Title
                    </span>
                </span>
                <input type="text" formControlName="name" class="txt-large-search"
                    placeholder="Example: Banking, Insurance and other Financial Clerks">
                <span class="input-group-btn">
                    <button class="searchbtn-lg" type="submit">Search</button>
                </span>
            </div>
        </form>

结果组件.html

<app-search-component></app-search-component>

搜索组件typescript

jobSearchSubmit() {
    this.fetchedJobTitleName = this.jobSearchForm.controls.name.value;
    this.fetchedVersionId = this.jobSearchForm.controls.versionId.value;
    this.fetchedDatas = this.jobSearchForm.controls;
this.router.navigate(['search']);
}

以下代码用于传递数据

服务文件

jobTitleMethod: Observable<any>;

  private jobTitleMethodData = new BehaviorSubject<any>('');

  constructor() {
    this.jobTitleMethod = this.jobTitleMethodData.asObservable();
  }

  jobMethod(data: any) {
    this.jobTitleMethodData.next(data);
  }

** search.ts **

    var passingData: any = {
      Name: this.fetchedJobTitleName,
      versionCode: this.fetchedVersionId,
    };
    this.dataService.jobMethod(passingData);

结果

this.dataService.jobTitleMethod.subscribe(
      (result) => {
        this.searchedParams = result;
        this.fetchedName = result.Name;
        this.fetchedVersionId = result.versionCode;
      },
      (err) => {
        console.warn(err);
      }
    );

Answer 1

运行时

this.router.navigate（['search']）;

您将加载与此路线关联的组件（我猜搜索Component），并且您将无法访问此。FetchedJobtitLename，this.fetchedversionId等。

您需要在路由时传递数据。参见 https://angular.io/guide/guide/router#fetch-data-be-be----- -Navigating