angular - 如何使用 typescript 修复 Angular 5 中所有页面的 'search input field in the header'

Question

我在标题中有一个输入搜索字段(粘性标题或在 css 世界中固定的位置)，它允许获取记录列表，当您单击其中一个时，它会转到概览页面。当您在 keyup 上键入搜索词时，它会从 api 获取结果。它有 debounceTime 用于减少对 api 的请求。搜索结果是一个记录列表，但我遇到的问题是搜索在概览页面上不起作用。我需要做什么才能在概览页面上进行搜索？

这是搜索输入框:

<input #searchText [(ngModel)]="searchFilterText" id="m_quicksearch_input_disabled" autocomplete="off" type="text" name="searchFilterText" class="m-list-search__form-input" value="" placeholder="Search...">

这是在 header 组件中耗时跨度后得到处理的搜索函数:

processSearchTerm() {
    if (this.searchTextRef) {
        fromEvent(this.searchTextRef.nativeElement, 'keyup')
            .pipe(
                debounceTime(AppConsts.DEBOUNCE_TIME), 
                distinctUntilChanged()
        ).subscribe(
            value => this.getMyData(this.searchTextRef.nativeElement.value.trim())
            );
    }
}

下面是在header组件中获取搜索结果列表的代码:

getMyData(searchTerm: string): void {
    if (searchTerm) {
        this.initSpinner = true;

        this._myDataServiceProxy.getmyDatasorSearchResults(
            searchTerm
        ).subscribe(result => {
            this.myDataRecords = result.items;
            this.myDataRecordTotal = result.totalCount;

            this.initSpinner = false;
        });
    } else {
        this.myDataRecordTotal = AppConsts.RESET_MYDATA_RECORD_COUNT;
    }
}    

获取header组件中数据的详细信息:

goToMyDataOverview(id: number): void {
    if (id) {
        this._router.navigate([`/app/main/data/${id}`]);
    }
}

带有标题组件中列表项的 anchor 标记:

<a (click)="goToMyDataOverview(item.id)"
   href="javascript:;"
   class="m-list-search__result-item"
   *ngFor="let item of myDataRecords; let i = index;">
    <span class="m-list-search__result-item-pic"><img class="m--img-rounded" src="assets/common/images/default-profile-picture.png" title="" alt="Profile picture"></span>
    <span class="m-list-search__result-item-text">{{item.firstname}} {{item.lastname}}</span>
</a>    

这里是概览组件的代码:

ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
        this.getData(id); 
    }
}

getData(id: string): any {
    if (id) {
        this.initSpinner = true;
        this._dataServiceProxy.getDataInformationById(
            id
        ).subscribe(result => {
            this.myData = result.data;
        });
    }
}

Answer 1

这里有相当多的代码......但从顶部开始:

如果这是模板:

<input #searchText 
       [(ngModel)]="searchFilterText" 
       id="m_quicksearch_input_disabled" 
       autocomplete="off" 
       type="text" name="searchFilterText" 
       class="m-list-search__form-input" 
       value="" placeholder="Search...">

这是关联的组件:

processSearchTerm() {
    if (this.searchTextRef) {
        fromEvent(this.searchTextRef.nativeElement, 'keyup')
            .pipe(
                debounceTime(AppConsts.DEBOUNCE_TIME), 
                distinctUntilChanged()
        ).subscribe(
            value => this.getMyData(this.searchTextRef.nativeElement.value.trim())
            );
    }
}

那你就不需要用this.searchTextRef.nativeElement.value了及其所有潜在问题。您在元素中使用双向绑定(bind) [(ngModel)]所以你可以访问绑定(bind)属性:searchFilterText .

但更好的解决方案(允许使用 debounceTime 的解决方案)是使用响应式(Reactive)形式:

模板:

<input [formControl]="searchTerm" 
       id="m_quicksearch_input_disabled" 
       autocomplete="off" 
       type="text" name="searchFilterText" 
       class="m-list-search__form-input" 
       value="" placeholder="Search...">

注意绑定(bind)到 formControl ，这是一个响应式表单指令。

组件:

searchTerm = new FormControl();

this.searchTerm.valueChanges
  .pipe(
    debounceTime(AppConsts.DEBOUNCE_TIME),
    distinctUntilChanged()
  ).subscribe(
    value => this.getMyData(value.trim())
  )

因为它使用响应式形式，所以它有一个内置的 valueChanges可观察到您可以观察变化。

看来 getMyData也是此 header 组件的本地。因此只有 header 可以访问过滤后的数据。所以你的标题组件也会显示列表。然后链接到详细信息页面。

看起来详情(概览)页面随后再次获取数据，但这次只是针对单个项目。

但是现在您想在详细信息(概览)页面中使用相同 搜索功能吗？在这种情况下，您要搜索什么？

如果如您的问题标题所述，您希望搜索出现在所有页面上，您有以下几种选择:

1) 您可以将搜索 UI 构建为一个单独的组件，您可以使用 <searchForm></searchForm> 等标签将其放在任何页面上.由于 searchForm 元素将出现在每个页面上，您可以通过 @ViewChild 与它通信

2) 您可以像这样在顶部和底部构建带有搜索 UI 的页面:

<searchForm></searchForm>
<router-outlet></router-outlet>

您可以使用向任何需要它的组件提供 searchTerm 的服务。

我这里有最后一个选项的简化版本:https://stackblitz.com/edit/angular-simpleservice2-deborahk

它在顶部有一个搜索组件，下面有两个“选项卡”，提供对这两个页面的访问。它使用一项服务在页面之间共享搜索词。