Ytukyg

I am having routes which are the same for different projects. So everything shown depends just on :projectId:

  {path: 'projects/:projecteId', children: [

    {path: 'info', component: InfoComponent},

    {path: 'settings', component: SettingsComponent},



  ], canActivate: [ProjectGuard]},



  // Other routes ..

  {path: 'account', component: AccountComponent]

In my toolbar I am having an option to select a project - similar to what you can do in the GAE console:

I would like to know how I can make a change in projectId detectable and update all affected components.

As you can see I have a ProjectGuard - the idea would be to have a guard that observes an object provided by a ProjectService and applies changes whenever the selection changes. However, I am not sure if this is a viable solution and whether there is a better, more Angular-ish way, to do something like that.

Do I really need such a guard here?

In the component that you'll load for path: 'projects/:projecteId', you can inject the ActivatedRoute and listen to params Observable on it.

The change in params will run your code:

Let's say that you open a ProjectComponent, you can do something like:

import { ActivatedRoute } from '@angular/router';



@Component({...})

export class ProjectComponent  {

  projectId;

  constructor(private route: ActivatedRoute) {}



  ngOnInit() {

    this.route.params.subscribe(params => {

      this.projectId = params['projecteId'];

      // Here you'll always get notified when `projecteId` changes.

      // You can do the needful from here.

    });

  }



}

Update:

In case of a CanActivate guard, inside the canActivate you can use the ActivatedRouteSnapshot. That also has a params on it which is an Object but with the updated params

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

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { Observable } from 'rxjs/Observable';



@Injectable()

export class ProjectGuard implements CanActivate {

  canActivate(

    next: ActivatedRouteSnapshot,

    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    // Here the `next.params.projectId` will always give you updated projectId

    ...

  }

}

You can watch for params.projectId and then also use some sort of a service that would store the previous value of the projectId. This you could use to compare with the current value of projectId to check if the Project was actually changed from the dropdown. You can then inject that service as a dependency in the ProjectGuard and you'll be good to go.

Here's a Sample StackBlitz for your ref.