[英]Angular 6 Unexpected behavior when getting access to child component of a parent component using lazy laoding
I am working on a registration system using Angular 6. The base AppModule
contains the following routes and they are working properly: 我在使用Angular 6的注册系统上工作。基本
AppModule
包含以下路由,它们可以正常工作:
const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path:'',
component: LoginComponent
},
{
path: 'forgot',
component: ForgotPasswordComponent
//canActivate: [AuthGuardService]
},
{
path:'dashboard',
loadChildren: '../app/dashboard/dashboard.module#DashboardModule'
},
{
path: '**',
redirectTo: 'login',
pathMatch: 'full'
}
];
As you can see, I am using the lazy loading concept, where I created a new module and component called dashboard
, containing the routes script dashboard-routing.module.ts
: 如您所见,我使用的是延迟加载概念,在其中创建了一个名为
dashboard
的新模块和组件,其中包含路由脚本dashboard-routing.module.ts
:
const routes: Routes = [
{
path:'',
component: DashboardComponent,
},
{
path:'home',
loadChildren: './main-navbar/main-navbar.module#MainNavbarModule'
},
{
path:'**',
redirectTo: '',
pathMatch: 'full'
}
];
As you can see again, I am using lazy loading again inside the dashboard component, and inside of it, I created the final module/component called main-navbar.component
wherein this part, all other after login component will be executed. 再次您可以看到,我再次在仪表板组件内部使用了延迟加载,并在其内部创建了名为
main-navbar.component
的最终模块/组件,其中将执行该部分以及所有其他登录后组件。
The structure is now like the following: 现在的结构如下:
Here is a plunker to check it . 这是一个检查一下的小伙伴 。
And for the simplicity, I removed the login and forgot password components, so you can check the dashboard component directly . 为了简单起见,我删除了登录和忘记密码组件,因此您可以直接检查仪表板组件 。
What's going wrong is described like the following: 发生问题的方式如下所示:
When logged in, the user will see the following URL properly with no errors: 登录后,用户将正确无误地看到以下URL:
localhost:4200/dashboard
Where the dashboard contains the component of main-navbar
: 仪表板包含
main-navbar
的组件:
Now I need to display the other components inside this page, so if the URL is: 现在,我需要显示此页面中的其他组件,因此,如果URL为:
localhost:4200/dashboard/home
I am redirected to the login component and get no errors. 我被重定向到登录组件,没有任何错误。 I think the problem is in how I am handling the routing files, and where I am putting the
<router-outlet>
elements, but can't figure it out. 我认为问题在于我如何处理路由文件以及将
<router-outlet>
元素放在哪里,但无法弄清楚。
Try this in dashboard-routing.module.ts: 在dashboard-routing.module.ts中尝试以下操作:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
const routes: Routes = [
{
path: 'dashboard',
component: DashboardComponent,
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{
path: 'home',
loadChildren: './main-navbar/main-navbar.module#MainNavbarModule'
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DashboardRoutingModule { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.