Angular 如何从文本框中获取输入值？

我正在开发一个搜索功能。但是，我似乎无法从文本框中获取值

搜索栏组件

import { Component, OnInit, Input } from '@angular/core';

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

  searchQuery: HTMLElement;
  searchQuerystr: string;

  constructor() { }

  ngOnInit() { }

  getinput(): void {

    this.searchQuerystr = document.getElementById('input').innerHTML;
    console.log(this.searchQuerystr);
  }
}

@Component({
  selector: 'app-searchresult',
  templateUrl: './searchresult.component.html',
  styleUrls: ['./searchresult.component.css']
})
export class SearchresultComponent implements OnChanges {
  @Input() searchQuerystr: string;

  searchResult: IRootResult[] = [];
  movie: IMovie;
  selectedMovie: IMovie;
  query: string;

  constructor(private _searchresultservice: SearchresultService) { }

  ngOnChanges() {
    // this.searchQuerystr = this.query;
    if (this.searchQuerystr) {
      this._searchresultservice.SearchDatabase(this.searchQuerystr)
        .subscribe(searchResult => {
          this.searchResult = searchResult;
        },
          error => console.log(error)
        );
    }
  }

  onSelect(movie: IMovie): void {
    this.selectedMovie = movie;
    window.setTimeout(function () { window.scrollTo(0, 1665); }, 300);
  }
}

搜索栏HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- The form -->
<div>
<form class="searchbar">
  <input type="text" id="input" placeholder="Search movies..">
  <button type="submit" (click)="getinput()"><i class="fa fa-search"></i></button>
</form>
<app-searchresult [searchQuerystr]='searchQuerystr'></app-searchresult>
</div>

由于文本框中的输入未定义，我收到一个未定义的错误。

---

关于如何解决这个问题，有什么建议吗？

在

搜索栏中使用
ngModel
：

...
<input [(ngModel)]="searchQuerystr" type="text" id="input" placeholder="Search movies..">
...

。。。
...
您可以使用双向绑定，然后将检索到的数据分发到服务中。然后，此服务可以在您的其他组件中引用。谢谢您关于87的建议！使用
ngModel
后，如何将数据发送到子组件？每次您在输入中写入任何内容时，它都会发送数据，因为它是双向绑定每次
searchQuerystr
的值更改时，此值将通过此代码传递给子组件