Activated Route not working in Angular2

Question

I am currently working on an angular2 project. I am consuming an API from my Vimeo account. I am having some trouble accessing the detail page. Here is my json file from vimeo.

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

I retrieve the data in the

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

I have a list page with the data which I retrieve from my "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();
  }
}

This is the "video.component.html" code

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

Then I get the results here

So, when I click view, I want to go to the detail page with all the information about that video. I use "resource_key" as the id to filter.

I have tried many things and I have not been able to make it work.

Here is my "video-detail.component.ts". HERE I NEED TO KNOW WHAT TO PUT. I HAVE TRIED MANY THINGS AND NOTHING WORKS.

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

the routes

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

And finally, what should I put in the "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

What is the problem? How is it related to `ActivatedRoute`? What content can't you retrieve? What does `can't retrieve` mean? Some error message? — Günter Zöchbauer, Jan 19 '17 at 06:29
Dear Günter Zöchbauer, Thank you so much for your answer. I edited my post to explain it better. Please check the new edit. Thanks — Danilo Morales, Jan 19 '17 at 15:52
Hi Günter, These are the routes. The routes and the params work ok.{ path: 'videos', component: VideosComponent}, { path: 'video/:resource_key', component: VideoDetailComponent}, — Danilo Morales, Jan 19 '17 at 16:13
Sure, but I need the parameter name. I guess the 2nd solution in my answer is what should do what you want. — Günter Zöchbauer, Jan 19 '17 at 16:15
The params works but I cannot get to filter that data. Thanks — Danilo Morales, Jan 19 '17 at 16:17
When i select from the list, I would like to go to the detail page with all the data from the selected item in list. Again, the params works, I can even inject it in the detail page, but I cannot the the data. Sorry if i am not explaining myself better. — Danilo Morales, Jan 19 '17 at 16:21
I guess the best way is to get it from `_videoService`. http://stackoverflow.com/questions/36271899/what-is-the-correct-way-to-share-the-result-of-an-angular-2-http-network-call-in/36291681#36291681 might help to get an idea how to implement it. — Günter Zöchbauer, Jan 19 '17 at 16:24
Hi Gunter. I have no problem retrieving data. My problem is opening the detail page with data from the item selected on the list. Thanks — Danilo Morales, Jan 19 '17 at 17:09
What data? You have the `resource_key`. Can't you get the data from the service using this key? — Günter Zöchbauer, Jan 19 '17 at 17:11
Hello Gunter. I solved the problem. Check my answer below. Thank you for your replies. — Danilo Morales, Jan 19 '17 at 21:02

Günter Zöchbauer · Answer 1 · 2017-01-19T16:15:26.023

To get the id this should work

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

or alternatively if the route is reused because only the parameter changed

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

score 0 · Answer 2 · answered Jan 19 '17 at 21:01

0

I could solve the problem. I just had to put ngIf='video'

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

answered Jan 19 '17 at 21:01

Danilo Morales

61
1
8

Activated Route not working in Angular2

2 Answers2