2

I have two Angular mini-apps on the same page. (Long story.) One is a navigation app, and one is the main app. I'm using the latest Angular router, based on angular/vladivostok.

It appears that the Angular router in one app (e.g., nav) does not respond to URL changes instantiated by the other app (e.g., the main app). So I've created a RouterSynchronizer1 class that I provide to both apps. It listens to both routers' NavigationEnd events. When one router (let's call it the "source") has an event, it calls navigateByUrl on the other router (let's call it the "subscriber").

This works fine for the most part. However, it doesn't call ngOnInit on the components of the subscriber.

I've created a Plunk to demonstrate this, based on the live example from Angular's official Routing & Navigation guide. Note that when you click the "Crisis Center" and "Heroes" links in the main app, ngOnInit is not called on the corresponding child components in the nav component. However, when you click those links in the nav component, ngOnInit is called on those child components, but not on the child components of the main app (which results in the lists of heroes/crisis centers being empty).

Any ideas? Thanks!

1 RouterSynchronizer class:

import { Inject } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';

interface ISubscriber {
  id: string;
  router: Router;
}

export class RouterSynchronizer {
  private subscribers: ISubscriber[] = [];

  connect(id: string, router: Router): void {
    this.subscribers.push({ id, router });
    this.startPublishing(id, router);
  }

  private startPublishing(source: string, router: Router): void {
    router.events.subscribe(route => {
      if (route instanceof NavigationEnd) {
        this.subscribers.forEach(subscriber => {
          if (subscriber.id === source || subscriber.router.url === route.urlAfterRedirects) {
            // Prevent infinite loops.
            return;
          }

          subscriber.router.navigateByUrl(route.urlAfterRedirects);
        });
      }
    });
  }
}

2 Answers 2

3

I figured it out! Apparently, I needed to use a zone. See the new Plunk for implementation.

The problem (I think!) is that my RouterSynchronizer class was instantiated and provided outside the Angular context. So it wasn't in an Angular zone when it pushed changes to the routers via navigateByUrl. Once I wrapped the navigateByUrl call in a zone provided by the app, it worked :)

1
  • 2
    If a method that emits an event is emitted in another Angular instance, then the zone of the current instance doesn't know about it. You need to use zone.run(() => {}) as you did to make the code execute inside the zone of the current Angular2 application. Jun 23, 2016 at 16:16
-1

You have to implement OnInit like so:

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'nav-heroes',
    template: `<span *ngIf="hasRunOnInit">ngOnInit has run in NavCrisisCenterComponent</span>`,
})

export class NavCrisisCenterComponent implements OnInit {
    private hasRunOnInit: boolean;

    ngOnInit() {
    this.hasRunOnInit = true;
}
}
6
  • Are you suggesting adding implements OnInit? This doesn't actually have any runtime effect. It is just an indicator the TypeScript compiler of what methods it implements.
    – jessepinho
    Jun 23, 2016 at 13:50
  • I ran your project and implemented OnInit it worked for me.
    – Ron
    Jun 23, 2016 at 14:00
  • Implementing it will allow you to tap into the lifecycle hook, otherwise your OnInit is just another function. Ref: angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#spy
    – Ron
    Jun 23, 2016 at 14:07
  • Ron, could you describe what you mean by it "worked"? For example, it should say "ngOnInit has run in NavHeroesComponent" when clicking the bottom "Heroes" button.
    – jessepinho
    Jun 23, 2016 at 14:07
  • Re: "otherwise your OnInit is just another function": Angular's docs say the exact opposite: "Angular instead inspects our directive and component classes and calls the hook methods if they are defined. Angular will find and call methods like ngOnInit(), with or without the interfaces."
    – jessepinho
    Jun 23, 2016 at 14:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.