Задать вопрос
@danilr

Почему не передаются данные из компоненты Angular?

Друзья, прошу помощи именно в исправлении и корректировки МОЕГО кода, ссылки мне не помогают, я уже замучался и запутался делать по примерам с ссылок, так как в примере все иначе, а подстроить под себя в точности не выходит. Буду крайне благодарен за помощь!
Задача - ввожу через инпут в одной компоненте, строка должна уходить через сервис в другой компонент и вызываться запрос к API параметром с этой новой строкой. У меня что-то идет не так - кажется строка не доходит.
Компонента где ввожу инпут:
import { Component, OnInit, Input, EventEmitter} from '@angular/core';
import { HttpService } from '../http.service'

@Component({
  selector: 'search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})

export class SearchComponent{
  InputFilm: string;

  constructor(private httpService: HttpService){
    this.httpService.InputFilm.subscribe(film => this.InputFilm = film)
  }

  handlerEnterSearch(){
    this.httpService.setInputFilm(this.InputFilm);
    this.httpService.getFilms().subscribe(data =>{
      this.httpService.setFilmsData(data)
      console.log('data: ', data);
    });
  }
  ngOnInit(){}
}

Компонента где получаю:
import { Component, OnInit } from '@angular/core';
import { HttpService } from '../http.service'

@Component({
  selector: 'result',
  templateUrl: './result.component.html',
  styleUrls: ['./result.component.scss']
})
export class ResultComponent implements OnInit {

  films:any;

  constructor(private httpService: HttpService){
    this.films = this.httpService.films
  }
  ngOnInit() {}
}

И сервис:
import {Injectable} from '@angular/core';
import {EventEmitter} from '@angular/core';
import {HttpClient,HttpParams} from '@angular/common/http';
import {Observable} from 'rxjs';
import { map } from 'rxjs/operators';
  
@Injectable()
export class HttpService{
    baseURL: string = "https://api.themoviedb.org/3";
  searchURL: string = "/search/movie"

  currentInputFilm: string;
  films: any

  InputFilm:EventEmitter<any> = new EventEmitter();

    constructor(private http: HttpClient){ }

    setInputFilm(inputFilm:string){
        this.currentInputFilm = inputFilm
        console.log('this.inputFilm: ', this.currentInputFilm);

    }
    setFilmsData(data){
        this.films = data
    }
      
    getFilms(){

        const params = new HttpParams().set('api_key', 'd6a5ac2d3d7cab11a084ca8080421b20').set('query', this.currentInputFilm)
        const options = {params: params};
        return this.http.get(this.baseURL+this.searchURL, options)
    }
}

Пожалуйста, кому не сложно потратить пару минут на помощь, напишите что и где исправить.
  • Вопрос задан
  • 82 просмотра
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы