Angular 角5和子路由

我的孩子有点问题。 我有仪表板模块和子模块，如profile、staff等，但概要文件组件不仅加载在链接localhost:4200/dashboard/profile上，而且也加载localhost:4200/profile。似乎子组件加载到根路由出口

---

以下是仅使用登录名的示例（但它与相同的项目和配置也相同），与idr-frontend.staging.myappworx.com/auth/login和idr-frontend.staging.myappworx.com/login一起使用

1。应用模块

 import {routing} from './app.routing';
    import {DashboardModule} from './dashboard/dashboard.module';
    import {AppComponent} from './app.component';

    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
           routing,
           DashboardModule
        ]
    })
    export class AppModule {}

2。App.routing.ts

import {Routes, RouterModule} from '@angular/router';
import {DashboardComponent} from './dashboard/dashboard.component';
import {LoginRedirect} from './auth/services/login-redirect.service';
import {EnsureAuthenticated} from './auth/services/ensure-authenticated.service';
const appRoutes: Routes = [         
   {
        path: 'dashboard',
        component: DashboardComponent,
        canActivate: [EnsureAuthenticated],
        loadChildren: './dashboard/dashboard.module#DashboardModule',
    },
    {
        path: '**',
        redirectTo: 'dashboard',
        canActivate: [EnsureAuthenticated]
    }
];

export const routing = RouterModule.forRoot(appRoutes);

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {DashboardComponent} from './dashboard.component';
import {dashboardRouting} from './dashboard.routing';
import {ProfileModule} from '../profile/profile.module';
import { StaffModule } from '../staff/staff.module';
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        dashboardRouting,
        ProfileModule,
        StaffModule
    ],
    declarations: [
        DashboardComponent
    ],
    providers: [            
    ],
    exports: []
})
export class DashboardModule {}

import {Routes, RouterModule} from '@angular/router';
import {ProfileComponent} from '../profile/profile.component';
import {EnsureAuthenticated} from '../auth/services/ensure-authenticated.service';

import { StaffComponent } from '../staff/staff.component';
const dashboardRoutes: Routes = [
    {
        path: 'profile',
        component: ProfileComponent,
        canActivate: [EnsureAuthenticated]
    },
    {
        path: 'staff',
        component: StaffComponent,
        canActivate: [EnsureAuthenticated]
    }
];

export const dashboardRouting = RouterModule.forChild(dashboardRoutes);

3。app.component.html

<router-outlet></router-outlet>

5。dashboard.routing.ts

import {Routes, RouterModule} from '@angular/router';
import {DashboardComponent} from './dashboard/dashboard.component';
import {LoginRedirect} from './auth/services/login-redirect.service';
import {EnsureAuthenticated} from './auth/services/ensure-authenticated.service';
const appRoutes: Routes = [         
   {
        path: 'dashboard',
        component: DashboardComponent,
        canActivate: [EnsureAuthenticated],
        loadChildren: './dashboard/dashboard.module#DashboardModule',
    },
    {
        path: '**',
        redirectTo: 'dashboard',
        canActivate: [EnsureAuthenticated]
    }
];

export const routing = RouterModule.forRoot(appRoutes);

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {DashboardComponent} from './dashboard.component';
import {dashboardRouting} from './dashboard.routing';
import {ProfileModule} from '../profile/profile.module';
import { StaffModule } from '../staff/staff.module';
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        dashboardRouting,
        ProfileModule,
        StaffModule
    ],
    declarations: [
        DashboardComponent
    ],
    providers: [            
    ],
    exports: []
})
export class DashboardModule {}

import {Routes, RouterModule} from '@angular/router';
import {ProfileComponent} from '../profile/profile.component';
import {EnsureAuthenticated} from '../auth/services/ensure-authenticated.service';

import { StaffComponent } from '../staff/staff.component';
const dashboardRoutes: Routes = [
    {
        path: 'profile',
        component: ProfileComponent,
        canActivate: [EnsureAuthenticated]
    },
    {
        path: 'staff',
        component: StaffComponent,
        canActivate: [EnsureAuthenticated]
    }
];

export const dashboardRouting = RouterModule.forChild(dashboardRoutes);

6。dashboard.component.html

   <div class="contentWrap">
        <header class="header">

        <div class="currentTime">
            {{currentTime}}
        </div>
        <div class="status"></div>

    </header>
    <router-outlet></router-outlet>
</div>

{{currentTime}}

请从app.module.ts中的导入中删除DashboardModule，因为它是延迟加载的，也许这就是为什么您的/profile也可以工作的原因

 imports: [
       routing,
       DashboardModule // delete this
    ]

---

localhost:4200/profile

也会加载子组件的原因如下：

 { path: '**', redirectTo: 'dashboard', canActivate: [EnsureAuthenticated] }

**通配符

用于重定向与配置中先前定义的任何路由都不匹配的路径，正如我所见，您没有定义

配置文件

路径，因此您被重定向到/dashboard

**用于重定向到404页面

 import {routing} from './app.routing';
    import {DashboardModule} from './dashboard/dashboard.module';
    import {AppComponent} from './app.component';

    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
           routing,
           DashboardModule
        ]
    })
    export class AppModule {}

---

在

中阅读更多关于它的信息，使用该配置，/profile将不起作用，只有/dashboard/profile会起作用，除非其缓存的版本中/profile是有效的？你能从你的示例中创建一个stackblitz吗？下面是一个仅使用登录的示例（但它与项目和配置相同），与和一起工作