Угловая 2 - разрешена ли маршрутизация только в дочернем компоненте?

Question

У меня основной компонент в качестве корневого компонента

<tracker-module></tracker-module> 

Под основным компонентом у меня есть вложенные компоненты, как показано ниже:

<header></header> 
    <left-navigation></left-navigation> 
    <my-app> 
    </my-app> 
    <footer></footer> 

С выше структуре, все суб-компоненты оказывают совершенно как это должно быть (поскольку эти компоненты не имеют маршрутизации, а просто html).

Но я не получаю работу с компонентом содержимого страницы, так как он содержит маршрутизацию для разных видов (только основной контент страницы изменяется с помощью верхнего и нижнего колонтитула и левой навигации). Я не уверен, почему? Любые идеи по этому поводу будут очень полезны.

мои boot.ts:

import {bootstrap} from 'angular2/platform/browser'; 
import {provide} from 'angular2/core'; 
import {TrackerComponent} from './tracker.component'; 
import {enableProdMode} from 'angular2/core'; 
import {Http, HTTP_PROVIDERS, Headers} from 'angular2/http'; 
import 'rxjs/Rx'; 
//enableProdMode(); 
bootstrap(TrackerComponent, []); 

main.component.ts:

import {Component, ElementRef, AfterViewInit, AfterViewChecked, OnInit, OnDestroy, DoCheck, Input, Output, SimpleChange, EventEmitter, ContentChild, ContentChildren, Renderer, IterableDiffers, Query, QueryList, TemplateRef} from 'angular2/core'; 

import {Http, HTTP_PROVIDERS, Headers} from 'angular2/http'; 
import {CRUDService} from './service/CRUDService'; 
import {APIService} from './service/APIService'; 
/* Header, Footer, Left Navigation and my-app components*/ 
import {Header} from './Shared/layout/header/Header'; 
import {Footer} from './Shared/layout/footer/Footer'; 
import {LeftNavigation} from './Shared/layout/left-navigation/LeftNavigation'; 
import {AppComponent} from './app.component'; 
/* Header, Footer, Left Navigation and my-app components*/ 

@Component({ 
    selector: 'tracker-module', 
    templateUrl: 'app/tracker.component.html', 
    directives: [Header,Footer,LeftNavigation,AppComponent] 
}) 
export class TrackerComponent { 
    constructor() {} 
    ngOnInit() {} 
} 

page.component.ts:

import {Component, ElementRef, AfterViewInit, AfterViewChecked, OnInit, OnDestroy, DoCheck, Input, Output, SimpleChange, EventEmitter, ContentChild, ContentChildren, Renderer, IterableDiffers, Query, QueryList, TemplateRef} from 'angular2/core'; 
import {ROUTER_PROVIDERS,LocationStrategy,HashLocationStrategy} from 'angular2/router'; 
import {TrackerUserAdmin} from "./Tracker/TrackerUserAdmin/TrackerUserAdmin"; 
import {CreateUserAdmin} from "./Tracker/CreateUserAdmin/CreateUser"; 
import {EditUserAdmin} from "./Tracker/EditUserAdmin/EditUser"; 
import {TrackerGroupAdmin} from "./Tracker/TrackerGroupAdmin/TrackerGroupAdmin"; 
import {CreateGroupAdmin} from "./Tracker/CreateGroupAdmin/CreateGroup"; 
import {EditGroupAdmin} from "./Tracker/EditGroupAdmin/EditGroup"; 
import {SavedSearch} from "./Tracker/SavedSearchAdmin/SavedSearch"; 
import {ResponseDateRules} from "./Tracker/ResponseDateRules/ResponseDateRules"; 
import {EditResponseDateRules} from "./Tracker/EditResponseDateRules/EditResponseDateRules"; 
import {CreateTicket} from "./Tracker/CreateTicket/CreateTicket"; 
import {TicketMaintenance} from "./Tracker/TicketMaintenance/TicketMaintenance"; 
import {TicketSearch} from "./Tracker/TicketSearch/TicketSearch"; 
/* Header and Footer*/ 
import {provideRouter, RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router'; 
import {Http, HTTP_PROVIDERS, Headers} from 'angular2/http'; 
import {CRUDService} from './service/CRUDService'; 
import {APIService} from './service/APIService'; 
/* Header and Footer*/ 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.component.html', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 
@RouteConfig([ 
    { path: '/TrackerUserAdmin', name: 'TrackerUserAdmin', component: TrackerUserAdmin }, 
    { path: '/CreateUserAdmin', name: 'CreateUserAdmin', component: CreateUserAdmin }, 
    { path: '/EditUserAdmin', name: 'EditUserAdmin', component: EditUserAdmin }, 
    { path: '/TrackerGroupAdmin', name: 'TrackerGroupAdmin', component: TrackerGroupAdmin }, 
    { path: '/CreateGroupAdmin', name: 'CreateGroupAdmin', component: CreateGroupAdmin }, 
    { path: '/EditGroupAdmin', name: 'EditGroupAdmin', component: EditGroupAdmin }, 
    { path: '/SavedSearch', name: 'SavedSearch', component: SavedSearch }, 
    { path: '/ResponseDateRules', name: 'ResponseDateRules', component: ResponseDateRules }, 
    { path: '/EditResponseDateRules', name: 'EditResponseDateRules', component: EditResponseDateRules }, 
    { path: '/CreateTicket', name: 'CreateTicket', component: CreateTicket }, 
    { path: '/TicketMaintenance', name: 'TicketMaintenance', component: TicketMaintenance }, 
    { path: '/TicketSearch', name: 'TicketSearch', component: TicketSearch, useAsDefault: true } 

]) 
export class AppComponent { 
    constructor(private router: Router) { 
     router.subscribe((val) => { /*whatever*/ 
      // alert("page verfication"); 
     }); 
    } 
    //Do nothing 
    ngOnInit() { 
     alert("page verfication"); 
    } 
} 

Однако мое уведомление в моем page.component .ts действительно работает.

Answer 1

Не указывайте ROUTER_PROVIDERS не один раз. Либо в bootstrap(...), либо в @Component() вашего корневого компонента, но нигде больше.

Answer 2

I вашего main.component.ts ваши использует <page-content></page-content>, но нет какого-либо селектора <page-content></page-content>, но в вашем выборе файла app.component.ts является 'my-app' и ваш использует <page-content></page-content> .Please изменить его 'my-app', что почему не показывает какую-либо вещь.