NG子组件不调用服务

Question

我有2个组件：NowRunningComponent和MovieDetailComponent。在NowRunningComponent中单击事件我在MovieDetailComponent中设置Input（）selectedMovie。在MovieDetailComponent中我正在听ngOnChanges，我正在调用属性更改的YT服务。我在MovieDetailComponent中注入了YT服务。但是在HTML中面临来自NowRunningComponent的错误。

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);
  }
}

该错误是从NowRuningComponent HTML生成的。你能在这里分享你的想法吗？我应该做EventEmitter吗？

Answer 1

首先，

  getYTvideos (title) {

getYTvideos和(title)之间的空间看起来像语法错误。当我尝试以这种方式声明函数时，至少它就像一个。

（其次，如果不是这样，我会将getYTvideos转换为箭头功能）。