如何在Angular 6项目中使用YouTube Api在组件中而不是根中

npm install angular-youtube-api --save

ng generate service youtube

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class YoutubeService {
  private apiKey = 'YOUR_YOUTUBE_API_KEY';
  private apiUrl = 'https://www.googleapis.com/youtube/v3';

  constructor(private http: HttpClient) {}

  searchVideos(query: string, maxResults: number = 5): Observable<any> {
    const params = {
      part: 'snippet',
      q: query,
      key: this.apiKey,
      maxResults: maxResults.toString()
    };
    const url = `${this.apiUrl}/search?${this.toQueryString(params)}`;

    return this.http.get(url);
  }

  private toQueryString(obj: any): string {
    return Object.keys(obj)
      .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
      .join('&');
  }
}

import { Component, OnInit } from '@angular/core';
import { YoutubeService } from './youtube.service';

@Component({
  selector: 'app-video-search',
  templateUrl: './video-search.component.html',
  styleUrls: ['./video-search.component.css']
})
export class VideoSearchComponent implements OnInit {
  videos: any[] = [];

  constructor(private youtubeService: YoutubeService) {}

  ngOnInit() {}

  search(query: string) {
    this.youtubeService.searchVideos(query).subscribe(response => {
      this.videos = response.items;
    });
  }
}

import { Component, OnInit } from '@angular/core';
import { YoutubeApiService } from 'angular-youtube-api';

@Component({
  selector: 'app-video-search',
  templateUrl: './video-search.component.html',
  styleUrls: ['./video-search.component.css']
})
export class VideoSearchComponent implements OnInit {
  videos: any[] = [];

  constructor(private youtubeApiService: YoutubeApiService) {}

  ngOnInit() {
    this.youtubeApiService.apikey = 'YOUR_YOUTUBE_API_KEY';
  }

  search(query: string) {
    this.youtubeApiService.search().list({
      part: 'snippet',
      q: query,
      maxResults: 5
    }).subscribe(response => {
      this.videos = response.items;
    });
  }
}

import { YoutubeApiModule } from 'angular-youtube-api';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    YoutubeApiModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<div *ngIf="videos.length">
  <div *ngFor="let video of videos">
    <h3>{{ video.snippet.title }}</h3>
    <iframe [src]="getVideoUrl(video.id.videoId)" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

getVideoUrl(videoId: string): string {
  return `https://www.youtube.com/embed/${videoId}`;
}