为什么路由器会破坏angular2中的生命周期挂钩？

Question

我在ts中有一个具有此模板的应用程序：

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

使用此RouteConfig

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

以下是游戏组件：

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");
    }
}

所以这个组件导入两次（一次是指令'test'，第二次是路由器插座），这就是我想要显示的问题。

我的问题是第一次（当我不使用路由器时）一切正常，但第二次，'{{title}}'没有渲染，控制台也没有记录'initGameComponent'但请记录'我建造'。

问题是为什么？！ （对不起，如果它是愚蠢的，因为我从angular2开始，但我真的无法弄明白）

Answer 1

<强> 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");
    }
  }

Answer 2

我认为你必须更换

inc

到

.htaccess

因为路由器创建自己的标签。在路由之后，DOM将看起来像

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