首页 文章

Angular 4 - 在组件之间传递字符串

提问于
浏览 次
0

我正在研究电影数据库，我正在使用MovieDb api . 我目前有20个随机生成的电影没有用户输入，所以我知道api正在工作 .

我的HTML有一个输入来接收电影名称和一个按钮来激活方法：

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

在我的.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);
}

正如您所看到的，我正在尝试从HTML上的用户发送电影 Headers ，并使用.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);
    }
}

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

html angular angular-services

2 回答

  • 0

    好吧，我邀请这些小修正使它工作：

    <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 => {
  ...

    建议使其更好地进行用户交互：

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

    当用户在输入被聚焦时点击 Enter 键时， (keyup.enter) 将调用 sendRequest 方法 .

    回复于
  • 1

    模板变量

    #MovieTitle

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

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

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

    简单的控制台日志记录/调试将更快地清除这些问题 .

    回复于

相关问题