NG дочерний компонент НЕ вызывает сервис - PullRequest
0 голосов
/ 07 апреля 2019

У меня есть 2 компонента: NowRunningComponent и MovieDetailComponent.По событию click в NowRunningComponent я устанавливаю Input () selectedMovie в MovieDetailComponent.В MovieDetailComponent я слушаю ngOnChanges и звоню в службу YT по поводу изменений свойств.Я ввел сервис YT в MovieDetailComponent.Однако, с ошибкой NowRunningComponent в HTML.

NowRunningComponent.html:8 ERROR TypeError: this.ytService.getYTvideos is not a function
    at MovieDetailComponent.push../src/app/movie-detail/movie-detail.component.ts.MovieDetailComponent.ngOnChanges (movie-detail.component.ts:26)
    at checkAndUpdateDirectiveInline (core.js:20661)
    at checkAndUpdateNodeInline (core.js:21929)
    at checkAndUpdateNode (core.js:21891)
    at debugCheckAndUpdateNode (core.js:22525)
    at debugCheckDirectivesFn (core.js:22485)

NowRunningComponent.ts:

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

  constructor(private nowrunningService: NowRunningServiceService) { }
  movies: Array<Movie>=[];
selectedMovie: Movie;
  ngOnInit() {
    console.log("MOvies length"+ this.movies);
    this.nowrunningService.getNowRunningMovies().subscribe((data:any) => {
      this.movies= data.results;

    });

  }

  posterClick(movie: Movie) {
    this.selectedMovie=movie;
    console.log(this.selectedMovie.original_title + " Selected.")
    console.log(this.selectedMovie.title + " Selected.")
  }
}

Компонент NowRunning HTML:

...
<app-movie-detail [selectedMovie] = "selectedMovie"></app-movie-detail>
...

MovieDetailComponent.ts

export class MovieDetailComponent implements OnInit,OnChanges {

  @Input()
  selectedMovie:Movie;
  constructor(private ytService: YoutubeService) { }

  ngOnInit() {
    console.log('movie detail init');
  }
  videos:Array<any>=[];
  ngOnChanges(changes: SimpleChanges) {

    console.log('movie changed');
    console.log(`Changes: ${JSON.stringify(changes)})`);
     if(this.selectedMovie.title!= null)
      {
        this.ytService.getYTvideos(this.selectedMovie.title).subscribe((data:any) => {
          this.videos= data.items;

        });
      }
  }

}

YouTubeService.ts

@Injectable({
  providedIn: 'root'
})
export class YoutubeService {

  search_url = "/yt-vid/";
  constructor(private http:HttpClient) { }

  getYTvideos (title) {
    return this.http.get(globals.api_base_href+this.search_url+title);
  }
}

Ошибка генерируется из HTML-кода NowRuningComponent.Не могли бы вы поделиться своими мыслями здесь?Должен ли я сделать EventEmitter?

1 Ответ

0 голосов
/ 07 апреля 2019

обо всем по порядку,

  getYTvideos (title) {

пробел между getYTvideos и (title) выглядит как синтаксическая ошибка. По крайней мере, он действует как один, когда я пытаюсь объявить функцию таким образом.

(Во-вторых, если бы это было не так, я бы преобразовал getYTvideos в функцию со стрелкой).

...