Question

我有一个要在用户单击搜索图标时显示的联系人列表

，并且我有一个要在用户开始键入

时显示的搜索列表。

lsit.component.html

    <app-recent-chat-list appHideElement [hideIf]="showEmptyState 
        || showContactList || showSearchList"></app-recent-chat-list>

        <app-contact-search-result-list *ngIf="showSearchList"></app- 
        contact-search-result-list>

         <app-contact-list *ngIf="showContactList" ></app-contact- 
          list>

list.component.ts

    handleDisplayingContactList() {
   // Subscribe to the openContactList subject
   this.subscription = 
   this.contactSearchService.openContactList.subscribe(
     openContactList => {
      // display contact list when the search icon has been clicked, else hide it
      if (openContactList === true) {
         this.showContactList = true;
      } else {
         this.showContactList= false;
      }
    });
}

handleDisplayingSearchResults() {
   // Subscribe to the openContactList subject
   this.subscription = this.contactSearchService.openSearchResults.subscribe(
      openSearchResults => {
        // display search list when start typing, else hide it 
        if (openSearchResults === true) {
          this.showSearchList= true;
        } else {
          this.showSearchList = false;
        }
      });
}

searchingtext.component.ts

updateSearchModel() {
    this.contactSearchService.openSearchResults.next(true);
}

Answer 1

最rx达到目标的一种方式，即所谓的“高阶可观”-可观的可观物：Observable<Observable<ContactList>>。视用户的行为而定，您必须next(openContactList)或next(openSearchResults)。

请考虑使用swtichMap()来避免比赛条件。

第二种方法（虽然不太优雅，但仍然是rx ic方式）是在iif()的帮助下实现的，该方法将谓词和两个可观察值作为输入：一个用于true情况下，另一种-false。

如何在角度的两个列表之间切换

1 个答案: