Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Subscribing to ActivatedRoute Params in Angular 2 does not update view templates

I'm not sure why the change detection wouldn't work here. I've tried a few things, including a setTimeout. I'm using RC5. Basically I want to change the content based off of a parameter in my URL. Should be pretty simple right?

thanks.ts

import { Component } from '@angular/core';
import { Card } from '../../components/card/card';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'sd-thanks',
  styleUrls: ['thanks.css'],
  directives: [Card],
  templateUrl: 'thanks.html'
})
export class Thanks {
  params: any;
  coming: any;
  constructor(public route: ActivatedRoute) {
    this.params = this.route.params.subscribe(
      params => {
        this.coming = params['coming'];
        console.log(this.coming); // this consoles the correct true/false value
      }
    );
  }
}

thanks.html

<card>
  <div *ngIf="coming" class="card-content">
    <span class="card-title">We can't wait to see you!</span>
  </div>
  <div *ngIf="!coming" class="card-content">
    <span class="card-title">We will certainly miss you!</span>
  </div>
</card>
like image 218
jaruesink Avatar asked Sep 02 '16 07:09

jaruesink


People also ask

What is the difference between ActivatedRoute and ActivatedRouteSnapshot?

Since ActivatedRoute can be reused, ActivatedRouteSnapshot is an immutable object representing a particular version of ActivatedRoute . It exposes all the same properties as ActivatedRoute as plain values, while ActivatedRoute exposes them as observables.

Can you explain the difference between ActivatedRoute and RouterState?

Difference between activatedroute and routerstateActivatedRoute interface provides access to information about a route associated with a component that is loaded in an outlet. Use to traverse the RouterState tree and extract information from nodes.


1 Answers

Params can only be strings because they come from the URL

If you change it to

this.coming = params['coming'] && params['coming'].toLowerCase() === 'true';

it should work.

like image 162
Günter Zöchbauer Avatar answered Sep 24 '22 13:09

Günter Zöchbauer