Html 角度4-组件之间的传递字符串

我正在开发一个电影数据库，我正在使用MovieDb api。我目前有20部没有用户输入的随机生成的电影，所以我知道api正在运行

我有一个HTML，其中有一个输入，用于输入电影名称，还有一个按钮用于激活该方法：

<button id="searchBarButton" (click)="sendRequest(MovieTitle)">Search</button>
<input id="MovieTitle" class= "searchBar" type="text" #MovieTitle>

搜索

在my.ts中搜索组件。我正在设置对我的服务的订阅，这将允许我使用API并通过它进行搜索：

sendRequest(value)
{
// Need to route the shit outta this
this._iMDBService.searchMDBMovie(this.MovieTitle).subscribe( shows => {
  this.searchedShows=shows.results;
  this.router.navigateByUrl("/details");
},
  error=>this.errorMessage=<any>error);
}

sendRequest（值）
{
//需要把这些狗屎从这里弄出去
this.\u iMDBService.searchMDBMovie（this.MovieTitle）.subscribe（shows=>{
this.searchedShows=shows.results；
this.router.navigateByUrl（“/details”）；
},
error=>this.errorMessage=error）；
}

正如您所看到的，我正在尝试通过HTML发送从用户处获取的电影标题，并将其与.ts文件一起发送到下面的服务

@Injectable()
    export class iMDBService {
    private _iMDBURL: string = 'https://api.themoviedb.org/3/';

    constructor(private _http: HttpClient) { }

    searchMDBMovie(MovieTitle) : Observable<any>{
        return this._http.get<any>(this._iMDBURL + 'search/movie?api_key=MyWorkingApiKey&language=en-US&query=' + MovieTitle + '&page=1&include_adult=false')
        .do(data => console.log('All: ' + JSON.stringify(data)))
        .catch(this.handleError);
    }

    private handleError(err: HttpErrorResponse) {
        console.log(err.message);
        return Observable.throw(err.message);
    }
}

@Injectable（）
导出类iMDBService{
private\u iMDBURL:string='1〕https://api.themoviedb.org/3/';
构造函数（私有的_http:HttpClient）{}
searchMDBMovie（电影字幕）：可观察{
返回此信息。_http.get（此信息。_iMDBURL+'search/movie？api_key=MyWorkingApiKey&language=en-US&query='+MovieTitle+'&page=1&include_成人=false'）
.do（data=>console.log（'All:'+JSON.stringify（data）））
.接住（这个.把手错误）；
}
私有句柄错误（错误：HttpErrorResponse）{
控制台日志（错误消息）；
返回可观察的抛出（错误消息）；
}
}

我的问题：api正在工作，但是我需要api请求之间的电影标题，HTML和.ts没有发送到service.ts，如何将标题名带到service.ts文件？

模板变量

#MovieTitle

指的是输入元素本身，而不是它的值。要获得该值，您需要：

<button id= "searchBarButton" (click)= "sendRequest(MovieTitle.value)">Search</button>

搜索

并在组件方法中使用该值，而不是再次尝试冗余访问tempalte变量

---

简单的控制台日志记录/调试将更快地解决这些问题。

好吧，我想这一点小小的修改将使它工作起来：

<button 
  id= "searchBarButton" 
  (click)="sendRequest(MovieTitle.value)">
  Search
</button>
<input 
  id="MovieTitle" 
  class="searchBar" 
  type="text" 
  #MovieTitle />


sendRequest(value) {
  this._iMDBService.searchMDBMovie(value).subscribe( shows => {
  ...

搜寻
发送请求（值）{
此._iMDBService.searchMDBMovie（值）.subscribe（显示=>{
...

为更好地进行用户交互，建议如下：

<button 
  id= "searchBarButton" 
  (click)="sendRequest(MovieTitle.value)">
  Search
</button>
<input 
  id="MovieTitle" 
  class="searchBar" 
  type="text" 
  #MovieTitle
  (keyup.enter)="sendRequest(MovieTitle.value)" />

搜寻

（keyup.enter）

当用户在输入被聚焦时点击

enter

键时，将调用

sendRequest

方法。

搜索