CODEWITHSUNDEEP
angularangular2-routing
BlackHoleGalaxy
BlackHoleGalaxy

Reputation: 9672

Angular2 route including id

In an Angular2 project, I struggle to make the router works properly.

In our app, we only have the main page and then a project dedicated pages. For example, the user access these project pages using a direct link pointing to

http:/ourwebsite.com/#/project/b288ba45-3b41-4862-9fed-7271245b9c29

I want, in the header navbar, to create a link pointing to the given component even if the user goes to home after that.

For example: the user goes to his project, then click Home, I want the link See project being able to redirect the user to his previous precise project.

My Routes:

export const ROUTES: Routes = [
  { path: 'home',  component: HomeComponent },
  { path: 'project/:uuid',  component: ProjectComponent },
  { path: '',   redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent  }
];

My app.component.html with nav header:

<ul class="nav navbar-nav">
    <li><a [routerLink]="['/home']">Home</a></li>
    <li><a [routerLink]="['/project', uuid]">See a project</a></li
</ul>

I tried this in app.component.ts:

import { Component, ViewEncapsulation, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Observable, Subscription } from 'rxjs';
import 'rxjs/Rx';

@Component({
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  uuid: string;
  private subscription: Subscription;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.subscription = this.route.params.subscribe(params => {
       this.uuid = params['uuid'];
       console.log('Route UUID', this.uuid);
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

But the fact is the UUID is printed in console as Undefined as this route is directly accessed from an external link.

I can get the UUID from the project.component.ts but how to pass it to the routerLink element in my navbar, which is located in app.component?

Use of comment solution:

I tried to use [routerLink]="['/project', {uuid: uuid}]" but the produced link url is: /#/think;uuid=undefined

Thanks for your help.

Upvotes: 3

Views: 2301

Answers (1)

Marius B
Marius B

Reputation: 788

If you need only one link saved at a time, you could save uuid as a global variable and then use it when generating a link.

You can add a global variable this way:

1) Create a new service (let's call it "SharedService") where you keep your global variable (you should also assign a value to it there, so that it would be initialized). You can also keep more global variables there.

shared.service.ts:

import { Injectable } from '@angular/core';

@Injectable()
export class SharedService {
  public uuid: string = '';

  constructor() { }

}

2) Import SharedService to your app.ts or app.module.ts (however it is called in your filesystem) and add it to providers in the same app.ts or app.module.ts file:

providers: [SharedService]

DON'T add SharedService to providers in any other components, because it will be initialized again and you'll end up with several instances of your global variable when you only want to have only one of them.

3) Now import SharedService to all the components you want to use your global variable in and also add that service to the constructor of each of those components:

set.component.ts:

 constructor(private shared: SharedService) {
    this.shared.uuid = 'test';
 }

get.component.ts:

 constructor(private shared: SharedService) {
    console.log(this.shared.uuid);
 }

Upvotes: 2

Related Questions