アクティブルートがAngular2で機能しない

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": {} 
    }, 

私は

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

は私が私の「video.component.tsから取得したデータとの一覧ページを持っている

"video.service.ts" のデータを取得します「

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

これは "video.component.html" コード

<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> 

ですそれから私は、私はビューをクリックしたときに、私がしたいので、ここでの結果

を取得しますそのビデオに関するすべての情報を含む詳細ページに移動します。私は "resource_key"をフィルタリングするIDとして使用します。

私は多くのことを試しましたが、私はそれを機能させることができませんでした。

ここは私の "video-detail.component.ts"です。ここで私は何を知る必要があります。私はたくさんのことと何もしていないことを試してきました。

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} 

そして最後に、私は取得するには、「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

を変更したため、私はこの問題を解決することができ、再利用されている場合。私はちょうど

<div *ngIf="video"> 
 
    {{video.name}} 
 
    <div [innerHtml] = "video.embed.html | safeHtml"></div> 
 
</div>