Youtube API 및 RxJS 6을 사용한 Angular 6 검색 상자 예제

Youtube API 및 RxJS 6을 사용한 Angular 6 검색 상자 예제

이 튜토리얼에서는 입력할 때 YouTube를 검색하는 데 도움이 되는 Angular 애플리케이션을 빌드할 것입니다. 결과는 각 YouTube 비디오에 대한 설명 및 링크와 함께 비디오 축소판 목록입니다. 데이터 처리에는 RxJS 6을 사용하고 구성 요소 간의 상호 작용에는 EventEmitter를 사용합니다.

Youtube API 개요가 있는 Angular 6 검색 상자 예제

목표

기술

각진 6

RxJS 6

YouTube v3 검색 API

프로젝트 구조

VideoDetail 객체(video-detail.model)는 각 결과에서 원하는 데이터를 보유합니다.

YouTubeSearchService (youtube-search.service)는 YouTube에 대한 API 요청을 관리하고 결과를 VideoDetail[]의 스트림으로 변환합니다.

SearchBoxComponent (search-box.component)는 사용자가 입력할 때 YouTube 서비스를 호출합니다.

SearchResultComponent (search-result.component)는 특정 VideoDetail를 렌더링합니다.

AppComponent (app.component)는 전체 YouTube 검색 앱을 캡슐화하고
결과 목록을 렌더링합니다.

관행

설정 프로젝트

서비스 및 구성 요소 만들기

명령 실행:

ng g s services/youtube-search

ng g c youtube/search-box

ng g c youtube/search-result

HttpClient 모듈 추가

app.module.ts를 열고 HttpClientModule를 추가합니다.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
'./youtube/search-box/search-box.component'에서 { SearchBoxComponent } 가져오기;
import { SearchResultComponent } from './youtube/search-result/search-result.component';

@Ng모듈({
선언: [
앱 구성요소,
SearchBoxComponent,
검색 결과 구성 요소
],
수입: [
브라우저 모듈,
Http클라이언트 모듈
],
공급자: [],
부트스트랩: [AppComponent]
})
내보내기 클래스 AppModule { }

결과 데이터 모델

더 보기:

Youtube API 및 RxJS 6을 사용한 Angular 6 검색 상자 예제