填充子路由器插座Angular2不工作

Question

下面的解決方案是第一次嘗試如下。

1. 創建app.module.ts和app.route.ts。
2. 爲app.component.ts創建了默認值。 app.component路由器到目前爲止已按預期工作，用於第一級路由。
3. 使用dashboard.module.ts和dashboard.routes.ts創建了一個名爲Dashboard的新模塊。
4. 我將儀表板導入到app.module.ts中。
5. 在Dashboard.component.ts中用child創建Sitebar，Header和HeaderNav。但是，不知道爲什麼子導航總是顯示在第一級路由器插座中，而不是子路由器插座。

Dashboard.component.ts以下代碼。

<div class="wrapper"> 
    <app-mydash-sidebar 
    [headerText]="'No Rush'" 
    [headerLink]="'http://www.bit-numbers.com'" 
    [headerLogoImg]="'/assets/img/angular2-logo-white.png'" 
    [backgroundColor]="'red'" 
    [backgroundImg]="'/assets/img/sidebar-5.jpg'" 
    [navItems]="navItems"> 
    </app-mydash-sidebar> 

    <div class="main-panel"> 
    <app-mydash-navbar [navItems]="navItems"></app-mydash-navbar> 

    <router-outlet ></router-outlet> 
    </div> 

</div> 

app.component.ts below。

<router-outlet></router-outlet> 

有什麼想法嗎？

app.routes.ts

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { AppComponent } from './app.component'; 
import { LoginComponent } from './login/login.component'; 
import { MembersComponent } from './members/members.component'; 
import { AuthGuard } from './auth.service'; 
import { SignupComponent } from './signup/signup.component'; 
import { EmailComponent } from './email/email.component'; 
import { HomeComponent } from './home/home.component'; 
import { BookingsComponent } from './bookings/bookings.component'; 
export const router: Routes = [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'signup', component: SignupComponent }, 
    { path: 'login-email', component: EmailComponent }, 
    { path: 'members', component: MembersComponent, canActivate: [AuthGuard] }, 
    { path: '', component: LoginComponent}, 
    { path: 'bookings', component: BookingsComponent }, 
]; 

export const routes: ModuleWithProviders = RouterModule.forRoot(router); 

mydash.routes.ts

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { AuthGuard } from '../auth.service'; 
import { MydashBookingsComponent } from '../mydash/mydash-bookings/mydash-bookings.component'; 
import { MydashChartComponent } from '../mydash/mydash-chart/mydash-chart.component'; 
import { MydashDashboardComponent } from '../mydash-dashboard/mydash-dashboard.component'; 
export const Dashboardrouter: Routes = [ 
{ 
    path: 'dashboard', 
    children: [{ 
     path: '', 
     pathMatch: 'full', 
     component: MydashDashboardComponent 
    }, 
    { 
     path: 'mybookings', 
     component: MydashBookingsComponent 
    }] 
} 
]; 
export const DashboardRouting: ModuleWithProviders = RouterModule.forChild(Dashboardrouter); 

app.module.ts

個

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AngularFireModule } from 'angularfire2'; 
import { AppComponent } from './app.component'; 
import { LoginComponent } from './login/login.component'; 
import { EmailComponent } from './email/email.component'; 
import { SignupComponent } from './signup/signup.component'; 
import { MembersComponent } from './members/members.component'; 
import { AuthGuard } from './auth.service'; 
import { routes } from './app.routes'; 
import { IconsComponent } from './icons/icons.component'; 
import { NotificationsComponent } from './notifications/notifications.component'; 
import { UserComponent } from './user/user.component'; 
import { MydashModule } from './mydash/mydash.module'; 
import { HomeComponent } from './home/home.component'; 
import { BookingsComponent } from './bookings/bookings.component'; 
import {FirebaseServiceService} from './services/firebase-service.service'; 


// Must export the config 
export const firebaseConfig = { 
    ... 
}; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LoginComponent, 
    EmailComponent, 
    SignupComponent, 
    MembersComponent, 
    IconsComponent, 
    NotificationsComponent, 
    UserComponent, 
    HomeComponent, 
    BookingsComponent, 

    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    AngularFireModule.initializeApp(firebaseConfig), 
    MydashModule, 
    routes, 

    ], 
    providers: [AuthGuard,FirebaseServiceService], 
    bootstrap: [AppComponent], 

}) 
export class AppModule { } 

mydash.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 

import { MydashChartComponent } from './mydash-chart/mydash-chart.component'; 
import { MydashCheckboxComponent } from './mydash-checkbox/mydash-checkbox.component'; 
import { MydashCloseLayerComponent } from './mydash-close-layer/mydash-close-layer.component'; 
import { MydashFooterComponent } from './mydash-footer/mydash-footer.component'; 
import { MydashNavbarComponent } from './mydash-navbar/mydash-navbar.component'; 
import { MydashSidebarComponent } from './mydash-sidebar/mydash-sidebar.component'; 
import { MydashSidebarItemsComponent } from './mydash-sidebar-items/mydash-sidebar-items.component'; 
import { MydashTableComponent } from './mydash-table/mydash-table.component'; 
import { MydashTaskListComponent } from './mydash-task-list/mydash-task-list.component'; 
import { MydashUserProfileComponent } from './mydash-user-profile/mydash-user-profile.component'; 
import { MydashNavbarItemsComponent } from './mydash-navbar-items/mydash-navbar-items.component'; 
import { MydashBookingsComponent } from './mydash-bookings/mydash-bookings.component'; 
import { DashboardRouting} from './mydash.routes'; 
import { MydashDashboardComponent } from '../mydash-dashboard/mydash-dashboard.component'; 
export interface DropdownLink { 
    title: string; 
    routerLink?: string; 
} 

export enum NavItemType { 
    Sidebar = 1, // Only ever shown on sidebar 
    NavbarLeft = 2, // Left-aligned icon-only link on navbar in desktop mode, shown above sidebar items on collapsed sidebar in mobile mode 
    NavbarRight = 3 // Right-aligned link on navbar in desktop mode, shown above sidebar items on collapsed sidebar in mobile mode 
} 

export interface NavItem { 
    type: NavItemType; 
    title: string; 
    routerLink?: string; 
    iconClass?: string; 
    numNotifications?: number; 
    dropdownItems?: (DropdownLink | 'separator')[]; 
} 
@NgModule({ 
    imports: [ 
    CommonModule, 
    DashboardRouting, 
    ], 
    declarations: [ 
    MydashChartComponent, 
    MydashCheckboxComponent, 
    MydashCloseLayerComponent, 
    MydashFooterComponent, 
    MydashNavbarComponent, 
    MydashSidebarComponent, 
    MydashSidebarItemsComponent, 
    MydashTableComponent, 
    MydashTaskListComponent, 
    MydashUserProfileComponent, 
    MydashNavbarItemsComponent, 
    MydashBookingsComponent, 
    MydashDashboardComponent], 

// These components are to export to allow access from the Dashboard. Do it manually, not done by ng CLI. 
    exports: [ 
    MydashSidebarComponent, 
    MydashNavbarComponent, 
    MydashFooterComponent, 
    MydashChartComponent, 
    MydashTaskListComponent, 
    MydashTableComponent, 
    MydashUserProfileComponent, 
    MydashCloseLayerComponent, 
    MydashBookingsComponent 
    ], 
    providers:[] 
}) 
export class MydashModule { } 

Answer 1

我解決了這個問題。問題在於儀表板組件缺失文件名mydash.routes.ts。在子路由之前，我在路徑下面分配了適當的組件：'儀表板'。現在，它就像一個冠軍。乾杯! 下面的答案代碼。

path: 'dashboard', 
    component: MydashDashboardComponent, 
    children: [{