首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >角5和子路由

角5和子路由
EN

Stack Overflow用户
提问于 2018-05-25 08:19:50
回答 2查看 445关注 0票数 1

我在儿童出入口上遇到了一些麻烦。我有仪表板模块和子模块,如配置文件、人员等,但是配置文件组件不仅加载在链接本地主机上:4200/仪表板/配置文件,而且只加载localhost:4200/profile。似乎子组件加载到根路由-出口。

下面的示例仅适用于登录(但项目和配置相同),工作方式为idr-Fronten.staging.myappworx.com/auth/ login和IDR-Fronten.staging.myappworx.com/login。

1. App.module

代码语言:javascript
复制
 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

代码语言:javascript
复制
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);

3. app.component.html

代码语言:javascript
复制
<router-outlet></router-outlet>

4. dashboard.module.ts

代码语言:javascript
复制
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 {}

5. dashboard.routing.ts

代码语言:javascript
复制
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

代码语言:javascript
复制
   <div class="contentWrap">
        <header class="header">

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

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

Stack Overflow用户

发布于 2018-05-25 08:47:02

localhost:4200/profile还加载子组件的原因是:

代码语言:javascript
复制
 { path: '**', redirectTo: 'dashboard', canActivate: [EnsureAuthenticated] }

** wild card用于重定向与配置中前面定义的任何路由不匹配的路径,正如我所看到的,您没有定义profile路径,因此您被重定向到/dashboard

**用于重定向到404页

正式文件中阅读更多关于它的信息

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50524636

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档