[英]Angular 4 - Passing string between components
I am working on a movie database, I am using the MovieDb api. 我正在使用电影数据库,正在使用MovieDb API。 I currently have 20 random generated movies without an user input, so I know the api is working. 我目前有20条随机生成的电影,没有用户输入,因此我知道api正在工作。
I have my HTML with an input to take in the movie name and a button to activate the method: 我的HTML带有输入的电影名称和一个用于激活方法的按钮:
<button id="searchBarButton" (click)="sendRequest(MovieTitle)">Search</button>
<input id="MovieTitle" class= "searchBar" type="text" #MovieTitle>
The in my .ts for the search component.I am setting up the subscription to my service which will allow me to use the API and search through it: 我在.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);
}
As you can see I am trying to send the movie title taken in from the user on the HTML and send it to the service below with the .ts file 如您所见,我正在尝试通过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);
}
}
My question: The api is working however I need the movie title in between the api request, the HTML and .ts is not sending to the service.ts, how do I bring the titlename to the service.ts file? 我的问题:api正在工作,但是我需要在api请求之间插入电影标题,HTML和.ts没有发送到service.ts,如何将标题名称带到service.ts文件?
the template variable 模板变量
#MovieTitle
refers to the input element itself, not the value of it. 引用输入元素本身,而不是它的值。 To get the value you need to: 要获得价值,您需要:
<button id= "searchBarButton" (click)= "sendRequest(MovieTitle.value)">Search</button>
and also use that value in your component method rather than trying to redundantly access the tempalte variable again. 并在组件方法中使用该值,而不是尝试再次冗余地访问tempalte变量。
simple console logging / debugging will clear these issues up much quicker. 简单的控制台日志记录/调试将更快地解决这些问题。
Well, I guest this little corrections would make it work: 好吧,我请这个小小的修正使它起作用:
<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 => {
...
An suggestion to make it better for user interaction: 建议使其更好地与用户交互:
<button
id= "searchBarButton"
(click)="sendRequest(MovieTitle.value)">
Search
</button>
<input
id="MovieTitle"
class="searchBar"
type="text"
#MovieTitle
(keyup.enter)="sendRequest(MovieTitle.value)" />
The (keyup.enter)
will call the sendRequest
method when the user hits the Enter
key when the input is focused. 当用户在输入焦点对(keyup.enter)
Enter
键时, (keyup.enter)
将调用sendRequest
方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.