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> {1}}。请将其更改为'my-app'，说明为什么没有显示任何内容。

Angular 2 - 仅在子组件中允许路由吗？

2 个答案: