Angular 6+中的搜索栏以搜索API

Question

我在Angular中创建了一个搜索栏，我在使用侧栏导航组件。我希望搜索框位于顶部标题中，然后将结果显示在结果组件上，该组件将成为单独的页面。

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
   <img src="{{ logo }}" alt="Logo">
   <span class="menuLabel">Menu</span>
    <mat-nav-list>
      <ul>
      <li class="nav-item"><a mat-list-item class="nav-link" routerLink="home" routerLinkActive="active"><i class="fas fa-home"></i> Home</a></li>
      <li class="nav-item"><a mat-list-item class="nav-link" routerLink="resources" routerLinkActive="active"><i class="fas fa-archive"></i> Resources</a></li>
      <li class="nav-item"><a mat-list-item class="nav-link" href="#"><i class="fas fa-users"></i> Admin</a></li>
    </ul>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar>
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <div class="row">
        <div class="col-sm-4"><app-search></app-search></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-4"><app-user></app-user></div>
      </div>
    </mat-toolbar>
    <ng-content>
    </ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

搜索组件：

<div class="results">
<mat-form-field class="example-full-width">
      <input  matInput placeholder="Search" [(ngModel)]="searchInput" name="search">
    </mat-form-field>
    <button mat-button (click)="onSearch(searchInput)" type="button"><i class="fas fa-arrow-right"></i></button>

如果它们在相同的组件上，将获得结果，但是我不知道如何将它们添加到不同的组件。

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
  query: any;

  searchInput: '';
  searchReturned = false;

  handleSuccess(data) {
    this.query = data.results;
    this.searchReturned = true;

  }

  constructor( private searchService: FetchDataService ) {}



  ngOnInit() {
  }


  onSearch(query: string) {
    return this.searchService.getSearch(query).subscribe(
      data => this.handleSuccess(data),
      error => console.log(error),
    );
  }
}