Contents:

Angularv4.初体验


1382 浏览 5 years, 10 months

22 搜索视频列表 Search Video List

版权声明: 转载请注明出处 http://www.codingsoho.com/

先实现一个搜索服务

src/app/videos/videos.service.ts

 search(query){
    return this.http.get(endpoint)
              .map(response=>{
                     let data = []
                     let req = response.json().filter(item=>{
                                    if (item.name.indexOf(query) >=0) {
                                         data.push(item)
                                    }
                                })                     
                     return data
               })
              .catch(this.handleError)
  }

src/app/search-detail/search-detail.component.ts

import { VideoService } from '../videos/videos.service';
@Component({
   providers: [VideoService]
 })

export class SearchDetailComponent implements OnInit, OnDestroy {
   private req: any;
   videoList: [any];

constructor(private route: ActivatedRoute, private _video:VideoService) { }   

 ngOnInit() {
      this.routeSub = this.route.params.subscribe(params=>{
           this.query = params['q']
           this.req = this._video.search(this.query).subscribe(data=>{
              this.videoList = data as [any];
            })
      })
  }

 ngOnDestroy(){
      this.routeSub.unsubscribe()
      this.req.unsubscribe()
  }  

  getEmbedUrl(item){
    // return '[http://player.youku.com/embed/](http://player.youku.com/embed/)' + item.embed + '=='
    return '[https://nokia.sharepoint.com/portals/hub/_layouts/15/VideoEmbedHost.aspx](https://nokia.sharepoint.com/portals/hub/_layouts/15/VideoEmbedHost.aspx)?chId=1b8cfb68%2D329c%2D45db%2D836c%2D0e3926661633&vId=' + item.embed + '&width=640&height=360&autoPlay=false&showInfo=true'    
  }

src/app/search-detail/search-detail.component.html

<div *ngFor='let abc of videoList'>
    <h1><a href='videos/{{ abc.slug }}' >{{ abc.name }}</a></h1>
    <div style="position:relative;height:0;padding-bottom:56.25%" *ngIf='abc.embed'>
        <iframe [src]="getEmbedUrl(abc) | safe" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen ></iframe>
    </div>
    <hr/>
</div>

至此，搜索结果里视频信息正常显示了。

我们同时优化一下video-list，删除一些不用的信息

去掉日期显示
src/app/video-list/video-list.component.ts

export class VideoListComponent implements OnInit, OnDestroy {
    // someItem = "<h1>Hi there</h1>"
    // todayDate; // [https://angular.io/docs/ts/latest/guide/pipes.html](https://angular.io/docs/ts/latest/guide/pipes.html)

  ngOnInit() {
     // this.todayDate = new Date()

给标题设为一级并删除一些其他没用信息，生成结果如下

src/app/video-list/video-list.component.html

  {{ title }}
<div *ngFor='let abc of videoList'>
    <h1><a href='videos/{{ abc.slug }}' >{{ abc.name }}</a></h1> 
    <div style="position:relative;height:0;padding-bottom:56.25%" *ngIf='abc.embed'>
        <iframe [src]="getEmbedUrl(abc) | safe" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen ></iframe>
</div>