为什么我的Angular @Output无法与两个输出子组件一起使用

Question

我正在尝试与@Output事件发射器进行子对父通信，但子组件在这里不起作用

@Component({
    selector: 'app-search',
    templateUrl: './search.component.html'
})
export class SearchComponent implements OnInit {

    songsList: any = [];
    artistsList: any = [];
    backArtistsList: any = [];
    backSongsList: any = [];
    searchValue: any = "";
    queryField: FormControl = new FormControl();
    searchSubscription: Subscription;

  @Output() hideResultEvent = new EventEmitter();
  @Output() showResultEvent = new EventEmitter();


  constructor(@Inject(DOCUMENT) private document: Document,
                private router: Router,
                private songsConfigService: SongsConfigService,
                private apiService: ApiService,
                private albumsConfigService: AlbumsConfigService,
                private artistsConfigService: ArtistsConfigService,
                private searchService: SearchService,
                private sanitizer: DomSanitizer) {

      this.songsConfigService.getTop().subscribe((res) => {
        for (const k in res) {
          res[k].cover = this.sanitizer.bypassSecurityTrustUrl(String(res[k].cover));
          res[k].cover_art_url = this.songsConfigService.loadCoverUrl(res[k]._id).url;
          this.songsList.push(res[k]);
        };
        this.songsList = this.songsList.slice(0, 3);
      });

      this.artistsConfigService.getArtists().subscribe(
        (res) => {
          this.artistsList = res;
          this.artistsList = this.artistsList.slice(0, 6);
          this.backArtistsList = this.artistsList;
          this.backSongsList = this.songsList;
        }
      );

    }

    ngOnInit() {
      this.searchSubscription = this.searchService.searchStatus.subscribe((value) => {
        console.log(value)
        if (value) {
          this.hideSearchResults();
        }
      });
      this.queryField.valueChanges
        .subscribe( (result) => {
          if(result !== ""){
            this.apiService.getuserByArtistName(result).subscribe((res) => {
              this.artistsList = res;
            });
            this.songsConfigService.getSongByTitle(result).subscribe((res) => {
              this.songsList = res;
            });
          }else{
            this.artistsList = this.backArtistsList;
            this.songsList = this.backSongsList;
          }});
    }

    search(e){
    console.log(e);
    console.log(this.searchValue)
    }
  showSearchResults() {
    this.showResultEvent.next("ok");
    this.document.body.classList.add(Config.classes.openSearch);
  }

  hideSearchResults() {
    this.hideResultEvent.next("ok");
    this.document.body.classList.remove(Config.classes.openSearch);
  }

    goToPage(page) {
        page = '/' + page;
        this.searchService.hideSearchResult();
        this.router.navigate([page]);
    }

  ngOnDestroy(){
      this.searchSubscription.unsubscribe();
    }

}

这里是html：

<div id="searchForm">
    <app-search (hideResultEvent)="hideSearchResults($event)" (showResultEvent)="showSearchResults($event)"></app-search>
</div>

我关注一些stackOverFlow帖子，我认为我的代码很好。我在子组件（searchComponent）上使用了两个输出，并在父组件（HeaderComponent）上调用了该事件]

Answer 1

仅使用

this.showResultEvent.emit（“ ok”）;

代替

this.showResultEvent.next（“ ok”）;