如何解决在角度子模块中设置根组件
我的应用路由有效,我想添加延迟加载。
这是正常工作的app-routing.module.ts文件(没有延迟加载):
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { LoginComponent } from './routes/login/login.component';
import { RegisterComponent } from './routes/register/register.component';
import { NavigationComponent } from './navigation/navigation.component';
import { DashboardComponent } from './routes/dashboard/dashboard.component';
import { ProfileComponent } from './routes/profile/profile.component';
const routes: Routes = [
{ path: 'login',component: LoginComponent },{ path: 'register',component: RegisterComponent },{
path: 'app',component: NavigationComponent,children: [
{ path: '',component: DashboardComponent },{ path: 'profile',component: ProfileComponent }
]
},{ path: '**',redirectTo: 'app' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }
现在,我为“导航”部分(navigation.module.ts)创建了一个子模块:
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { NavigationComponent } from './navigation/navigation.component';
import { DashboardComponent } from './routes/dashboard/dashboard.component';
import { ProfileComponent } from './routes/profile/profile.component';
const routes: Routes = [
{ path: '',component: ProfileComponent },];
@NgModule({
declarations: [
NavigationComponent,DashboardComponent,ProfileComponent,],imports: [
CommonModule,FormsModule,ReactiveFormsModule,bootstrap: [NavigationComponent]
})
export class NavigationModule { }
这是新的app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes,loadChildren: () => import('./navigation/navigation.module').then(m => m.NavigationModule)
},exports: [RouterModule]
})
export class AppRoutingModule { }
现在,当我打电话给例如/ app / profile时,我有两种不同的行为:
没有延迟加载的行为(期望):
<app-root>
<router-outlet></router-outlet>
<app-navigation>
<!-- sidebar and toolbar content -->
<router-outlet></router-outlet>
<app-profile>
<!-- profile content -->
</app-profile>
</app-navigation>
</app-root>
具有延迟加载的行为:
<app-root>
<router-outlet></router-outlet>
<app-profile>
<!-- profile content -->
</app-profile>
</app-root>
在延迟加载中如何具有相同的行为?
解决方法
在NavigationModule中尝试
const routes: Routes = [
{ path: '',component: NavigationComponent,children: [
{ path: '',component: DashboardComponent },{ path: 'profile',component: ProfileComponent },]
];
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。