填充子路由器插座 Angular2 不起作用

Question

下面的解决方案是第一次尝试，如下所示。

1. 创建了app.module.ts和app.route.ts。
2. 为 app.component.ts 创建默认值。到目前为止，app.component 路由器在第一级路由中按预期工作。
3. 创建了一个名为 Dashboard 的新模块，其中包含 dashboard.module.ts 和 dashboard.routes.ts。
4. 我将仪表板导入到app.module.ts中。
5. 在 Dashboard.component.ts 中使用子 .但是，不知道为什么子导航总是显示在第一级路由器插座中，而不是子路由器插座中。

下面的 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如下。

  <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: [{