CODEWITHSUNDEEP
javascriptangularjstypescriptangular
Khalenji
Khalenji

Reputation: 3

Why the router break the lifecycle hooks in angular2?

I have an application in ts which have this template :

<main>
    <test></test>
    <router-outlet></router-outlet>
</main>

With this RouteConfig

@RouteConfig([
    { path: '/myApp/game', name: 'GamePage', component: GameComponent, useAsDefault: true}
])

Here are the game component : 

import {Component} from 'angular2/core';

@Component({
    selector: 'test',
    template: '<div>{{title}}</div>'
})
export class GameComponent {
    title = "myTest";

    constructor(){
        console.log("I am constructed")
    }

    ngOnInit(){
        console.log("initGameComponent");
    }
}

So this component is imported twice (once by the directive 'test', a second time by the router outlet), which is what I want in order to show the problem.

My problem is that the first time (when I don't use the router) everything's works fine, but the second time, the '{{title}}' is not rendered and the console don't log 'initGameComponent' but DO log 'I am constructed'.

The question is why ?! (Sorry if it's something stupid because I'm starting with angular2, but I really can't figure it out)

Upvotes: 0

Views: 321

Answers (2)

Nick
Nick

Reputation: 10163

I think you must replace

<main>
    <test></test>
    <router-outlet></router-outlet>
</main>

to 

<main>
    <router-outlet></router-outlet>
</main>

Because router creates own tag. And after routing, DOM will looks like

<main>
    <router-outlet></router-outlet>
    <test _ngcontent-jll-9=""></test>
</main>

Upvotes: 0

micronyks
micronyks

Reputation: 55443

Working Plunker -with No issue as you have described

boot.ts

import {Component,bind} from 'angular2/core';
import {Router,ROUTER_PROVIDERS,RouteConfig, ROUTER_DIRECTIVES,APP_BASE_HREF,LocationStrategy,RouteParams,ROUTER_BINDINGS} from 'angular2/router';
import {bootstrap}        from 'angular2/platform/browser';

import{GameComponent} from 'src/GameComponent';

@Component({
  selector: 'my-app',
    template: `
    <h1>Component Router</h1>
    <hr> 
    <test></test>
    <hr>
    <router-outlet></router-outlet>
   `,
  directives: [ROUTER_DIRECTIVES,GameComponent]
})
@RouteConfig([
  //{path:'/ComponentOne', name: 'ComponentOne', component: ComponentOne, useAsDefault:true},

   { path: '/myApp/game', name: 'GamePage', component: GameComponent, useAsDefault: true}

])
export class AppComponent {

}

bootstrap(AppComponent, [
      ROUTER_PROVIDERS,bind(APP_BASE_HREF).toValue(location.pathname)
]);

GameComponent.ts

 import {Component,View} from 'angular2/core';

 @Component({
   selector:'test',
    template: `
    <div>{{title}}</div>

    `
  })

  export class GameComponent {
    title = "myTest";

    constructor(){
        console.log("I am constructed")
    }

    ngOnInit(){
        console.log("initGameComponent");
    }
  }

Upvotes: 2

Related Questions