Question

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

创建了app.module.ts和app.route.ts。
为app.component.ts创建默认值。到目前为止，app.component路由器正在按预期工作，用于第一级路由。
使用dashboard.module.ts和dashboard.routes.ts创建了一个名为Dashboard的新模块。
我将信息中心导入了app.module.ts。
在带有子项的Dashboard.component.ts中创建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。

  <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 中缺少仪表板组件。在Child路由之前，我在路径下面分配了相应的组件：'dashboard'。现在，它就像一个冠军。干杯! 答案代码如下。

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

填充子路由器出口Angular2无法正常工作

1 个答案: