激活的路线在 Angular2 中不起作用答案

【问题标题】：Activated Route not working in Angular2激活的路线在 Angular2 中不起作用
【发布时间】：2017-01-19 03:59:14
【问题描述】：

我目前正在做一个 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": {}
  },

我在

中检索数据

“video.service.ts”

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”中检索到的数据

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

【问题讨论】：

有什么问题？它与ActivatedRoute 有什么关系？您无法检索哪些内容？ can't retrieve 是什么意思？一些错误信息？
尊敬的 Günter Zöchbauer，非常感谢您的回答。我编辑了我的帖子以更好地解释它。请检查新的编辑。谢谢
能否也添加您的路线？
您好，Günter，这些是路线。路由和参数工作正常。{ path: 'videos', component: VideosComponent}, { path: 'video/:resource_key', component: VideoDetailComponent},
当然可以，但我需要参数名称。我想我的答案中的第二个解决方案是你想要做什么。

标签： angular parameters routes master-detail

【解决方案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']); 
    });
  }

【讨论】：

【解决方案2】：

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

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

【讨论】：