angular2 routerOnActivate is not called

I have the following components, one main and another. I would like to navigate programmatically from main to another.

Main

/// <reference path="../../node_modules/angular2/typings/browser.d.ts" />
/// <reference path="../../node_modules/angular2/core.d.ts" />
/// <reference path="../../node_modules/angular2/router.d.ts" />

import {Component, provide} from 'angular2/core';
import {RouteConfig, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router';

@RouteConfig([
    { path: '/Main/...', name: 'Main', component: Main}
])
@Component({
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS],
    selector: 'Main',
    template:
    '<div>
        <button type="button" (click)="navigate()">Navigate</button>
    </div>'
})
export class Main {
    constructor(private _router: Router) { }

    navigate() {
        this._router.navigateByUrl('Another');
    }
}

Another

/// <reference path="../../node_modules/angular2/typings/browser.d.ts" />
/// <reference path="../../node_modules/angular2/core.d.ts" />
/// <reference path="../../node_modules/angular2/router.d.ts" />

import {Component, provide} from 'angular2/core';
import {RouteConfig, Router, ComponentInstruction, OnActivate,    ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router';

@RouteConfig([
    { path: '/Another/...', name: 'Another', component: Another}
])
@Component({
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS],
    selector: 'Another',
    template:
    '<div [style.display]="isActive()">
        <h1>i'm another!</h1>
    </div>'
})
export class Another implements OnActivate {
    constructor(private _router: Router) { }

    IsActive = false;

    isActive() {
        return (this.IsActive === true) ? 'block' : 'none';
    }

    routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
        this.IsActive = true;
        console.log("called! surprisingly.");
    }
}

It seems that routerOnActivate is never called, although the URL in the browser shows Main/Another. Why isn’t it called?

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

Your route to Another is a non-terminal route due to the use of the elipsis ... on the end.

You need to include <router-outlet></router-outlet> in your templates so the router knows where to render.

You need to create a default route with path / in the @RouteConfig for Another if you want to navigate to it.

{ path: '/', name: 'AnotherDefault', component: AnotherDefault, useAsDefault: true }

The other option is to remove the ... from the end of the path e.g. path: '/Another' if you want to navigate to it.

Jason
Guest

As it turns out, you shouldn’t bootstrap your components if you’re planning to navigate to them using Angular2 router. You’ll need to plan your navigation strategy in project planning stage. It’ll be classic mode, meaning you’ll have parent/child relationships and hide/show based on flags or routing mode, meaning you don’t bootstrap or add component markups in their parent template and use angular’s router instead. Angular itself will take care of all the navigation and showing/hiding of components automatically. All that’s needed, is RouteConfig and bootstrapping your main component. Also note, angular2 tutorials are not tailored to specific languages. If you… Read more »