Question

我目前正在开发一个angular2项目。我正在使用我的Vimeo帐户中的API。我在访问详细信息页面时遇到了一些问题。这是我在vimeo的json文件。

  {
    "total": 63,
    "page": 1,
    "per_page": 25,
    "paging": {
    "next": "/channels/1021571/videos?access_token=XXXX&sort=manual&page=2",
    "previous": null,
    "first": "/channels/1021571/videos?access_token=XXX&sort=manual&page=1",
    "last": "/channels/1021571/videos?access_token=XXXX&sort=manual&page=3"
  },
  "data": [
    {
      "uri": "/videos/173279622",
      "name": "ladder resume and writing service",
      "description": null,
      "link": "https://vimeo.com/173279622",
      "duration": 97,
      "width": 1920,
      "language": null,
      "height": 1080,
      "embed": {},
      "created_time": "2016-07-03T20:55:54+00:00",
      "modified_time": "2017-01-18T02:07:51+00:00",
      "release_time": "2016-07-03T20:55:54+00:00",
      "content_rating": [],
      "license": null,
      "privacy": {},
      "pictures": {},
      "tags": [],
      "stats": {
      "plays": 11
    },
    "metadata": {},
    "user": {},
    "app": null,
    "status": "available",
    "resource_key": "b12ca3300325ea061355fa46c9cb58d1937e2ef9",
    "embed_presets": {}
  },

我在

中检索数据

＆＃34; video.service.ts＆＃34;

import { Injectable } from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Video} from './video'
import 'rxjs/add/operator/map';

@Injectable()
export class VideosService {

  constructor(private http: Http) { }

private url = 'https://api.vimeo.com/channels/1021571/videos?access_token=XXXX&sort=manual'
  getVideos(){
    return this.http.get(this.url).map(res => res.json().data);
  }
}

我有一个列表页面，其中包含我从我的＆＃34; video.component.ts＆＃34;

中检索到的数据

import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
import { VideosService} from './videos.service';
import { DomSanitizer, SafeResourceUrl, SafeUrl, SafeHtml, } from '@angular/platform-browser';

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

@Pipe({ name: 'safeUrl'})
export class SafeUrlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustUrl(value);
  }
}

@Component({
  selector: 'app-videos',
  templateUrl: './videos.component.html',
  styleUrls: ['./videos.component.css'],
  providers: [VideosService],
})
export class VideosComponent implements OnInit {
  videos
  medium = ''
  lenght = Array(25);
  constructor(private _videosService: VideosService, private sanitizer: DomSanitizer) {
  }

  getVideos(){
    this._videosService.getVideos().toArray().subscribe(videos => this.videos = videos);
  }

  ngOnInit() {
    this.getVideos();
  }
}

这是＆＃34; video.component.html＆＃34;代码

<div *ngFor="let item of lenght; let i = index">
  <div *ngFor="let video of videos">
    <div class="col-xs-12 col-md-3 centercontent">
      <h6 id="h6vim">{{video[i].name}}</h6>
      <img id="vimimg" [src]="video[i].pictures.sizes[2].link | safeUrl">
      <a routerLink="/video/{{video[i].resource_key}}">View</a>
  </div>
</div>
</div>

然后我在这里得到结果

因此，当我点击查看时，我想转到详细信息页面，其中包含有关该视频的所有信息。我使用＆＃34; resource_key＆＃34;作为过滤的ID。

我尝试了很多东西，但是我无法使它发挥作用。

这是我的＆＃34; video-detail.component.ts＆＃34;。在这里我需要知道要投入什么。我尝试过很多事情而且没有工作。

import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
import { VideosService} from '../videos.service'
import { DomSanitizer, SafeResourceUrl, SafeUrl, SafeHtml, } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';

@Pipe({ name: 'safeUrl'})
export class SafeUrlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
    return this.sanitized.bypassSecurityTrustUrl(value);
  }
}

@Component({
  selector: 'app-video-detail',
  templateUrl: './video-detail.component.html',
  styleUrls: ['./video-detail.component.css'],
  providers: [VideosService],
})
export class VideoDetailComponent implements OnInit {
  constructor(private _videosService: VideosService, private sanitizer: DomSanitizer, private route: ActivatedRoute) {
  }

  ngOnInit() {
    // WHAT CODE SHOULD I USE??
  }
}

路线

{ path: 'videos', component: VideosComponent}, 
{ path: 'video/:resource_key', component: VideoDetailComponent}

最后，我应该在＆＃34; video.detail.component.html

中加入什么

<h2>THIS IS THE VIDEO DETAIL PAGE</h2>

VIDEO RESOURCE_KEY <!-- {{WHAT SHOULD I PUT HERE??}} -->

VIDEO NAME <!-- {{WHAT SHOULD I PUT HERE??}} -->

VIDEO DESCRIPTION 

video

Answer 1

要获取id，这应该有效

export class VideoDetailComponent implements OnInit {
  constructor(private _videosService: VideosService, private sanitizer: DomSanitizer, private route: ActivatedRoute) {
    console.log(route.snapshot.params['resource_key']); 
  }

或者如果路由被重复使用，因为只有参数改变了

export class VideoDetailComponent implements OnInit {
  constructor(private _videosService: VideosService, private sanitizer: DomSanitizer, private route: ActivatedRoute) {
    route.params.subscribe(params => {
      console.log(parmas['resource_key']); 
    });
  }

Answer 2

我可以解决问题。我只需要输入ngIf ='video'

激活的路线不在Angular2中工作

2 个答案: