Angular 4-延遲加載-模塊路由無法正常工作

Question

我的問題是，子路由器不起作用。 應用程序模塊加載DashboardModule（並且標頭也將顯示）。 問題從這里開始。 標頭中的路由器鏈接不希望加載其他組件。 我想要的是 ？ 路由器鏈接顯示路由器出口之間的“子”組件。 感謝幫助。

app-routing.module.ts

import { NgModule } from '@angular/core';
    import { Routes, RouterModule, ExtraOptions } from '@angular/router';
    import { LoginComponent } from './pages/login/login.component';
    import { ModuleWithProviders } from '@angular/core';

    export const routes: Routes = [
        {
            path: '',
            pathMatch: 'full',
            component: LoginComponent
        },
        {
            path: 'login',
            component: LoginComponent
        },
        {
            path: 'dashboard',
            pathMatch: 'full',
            loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule'
            //canLoad: [AuthGuard]
        },
    ];

    const config: ExtraOptions = {
      useHash: true,
    };

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

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule }     from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';
import { LoginComponent } from './pages/login/login.component';
import { RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import { HttpModule } from '@angular/http';

import { CommonModule } from "@angular/common";

const rootRouting: ModuleWithProviders = RouterModule.forRoot([], { useHash: true });

@NgModule({
  imports:      [ BrowserModule,
                  FormsModule,
                  AppRoutingModule,
                  CommonModule,

                  FormsModule, 
                  HttpModule ],

  declarations: [ AppComponent,
                  LoginComponent ],
  providers: [

  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

<router-outlet> </router-outlet>

dashboard.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from "./header/header.component";
import { DashboardComponent } from './dashboard.component';
import { DashboardRoutingModule } from './dashboard-routing.module';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { CommonModule } from '@angular/common';
import { AlldocumentsComponent } from '../main-functions/all-documents/alldocuments.component';
import { ContentComponent } from "./content/content.component";

@NgModule({
  imports: [
    DashboardRoutingModule,
    FormsModule,
    HttpModule,
    CommonModule
  ],
  declarations: [
    DashboardComponent,
    HeaderComponent,
    AlldocumentsComponent,
    ContentComponent

  ],
  bootstrap:    [ DashboardComponent]
})
export class DashboardModule {
}

儀表板路由.module.ts

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { ModuleWithProviders } from '@angular/core';
import { DashboardComponent } from './dashboard.component';
import { HeaderComponent } from './header/header.component';
import { ContentComponent } from './content/content.component';
import { AlldocumentsComponent } from '../main-functions/all-documents/alldocuments.component';

const routes: Routes = [
  {
  path: '',
  component: DashboardComponent,
  pathMatch: 'full',
    },
{
      path: '',
      component:HeaderComponent,
      children: [

      ]  
    },

];


export const DashboardRoutingModule: ModuleWithProviders = RouterModule.forChild(routes)

dashboard.component.html

<router-outlet> </router-outlet>

header.component.html

<li routerLinkActive="active"><a [routerLink]="['alldocuments']">MINDEN DOKUMENTUM</a></li>

Answer 1

您嘗試使用相同的路由加載這兩個組件...實際上，如果僅獲得標頭組件，那是因為它是路由配置中的最后一個組件。

您應該創建一個包絡組件，該組件將顯示您的兩種補償劑並將其路由到''路徑。

dashboard-rooting.module：

const routes: Routes = [
  {
    path: '',
    component: FullComponent,
    pathMatch: 'full',
  },
];

FullComponent.html

<your-header-css-balise></your-header-css-balise>
<your-dashboard-css-balise></your-dashboard-css-balise>

如果要根據子路由在此模板中顯示其他組件，請用<router-outlet></router-outlet>替換<your-dashboard-css-balise></your-dashboard-css-balise> <router-outlet></router-outlet>並進行配置在您的dashboard-rooting.module的子路由元數據中。

我希望我很清楚，祝你有美好的一天