[英]Angular 4 - lazy loading - module routing doesn't work as well
我的问题是,子路由器不起作用。 应用程序模块加载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>
您尝试使用相同的路由加载这两个组件...实际上,如果仅获得标头组件,那是因为它是路由配置中的最后一个组件。
您应该创建一个包络组件,该组件将显示您的两种补偿剂并将其路由到''路径。
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
的子路由元数据中。
我希望我很清楚,祝你有美好的一天
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.