Angular 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

我你的 main.component.ts 你正在使用 <page-content></page-content> 但没有任何选择器 <page-content></page-content> 但在你的 app.component.ts 文件选择器是 'my-app' 并且你正在使用 <page-content></page-content>。请将其更改为 @ 987654326@那为什么没有显示任何东西。