Question

我试图使用Core UI Angular种子。

这里是我的路由文件： 应用/ app.routing.js

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

// Import Containers
import {
    FullLayoutComponent,
    SimpleLayoutComponent
} from './containers';

export const routes:Routes = [
    {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full',
    },
    {
        path: '',
        component: FullLayoutComponent,
        data: {
            title: 'Home'
        },
        children: [
            {
                path: 'dashboard',
                loadChildren: './views/dashboard/dashboard.module#DashboardModule'
            },
            {
                path: 'clients',
                loadChildren: './views/clients/clients.module#ClientsModule'
            },
        ]
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

应用/视图/客户端/ clients.routing.ts

import {NgModule} from '@angular/core';
import {
    Routes,
    RouterModule
} from '@angular/router';

import {ClientsComponent} from './clients.component';

const routes:Routes = [
    {
        path: '',
        component: ClientsComponent,
        data: {
            title: 'Clients'
        },
        children: [
            {
                path: 'organizations',
                loadChildren: './organizations/organizations.module#OrganizationsModule'
            },
        ]
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ClientsRoutingModule {
}

应用\视图\客户\组织\ organizations.routing.ts

import {NgModule} from '@angular/core';
import {
    Routes,
    RouterModule
} from '@angular/router';

import {IndexComponent} from './index.component';
import {CreateComponent} from './create.component';

const routes:Routes = [
    {
        path: '',
        component: IndexComponent,
        data: {
            title: 'Organizations'
        },
        children: [
            {
                path: 'create',
                component: CreateComponent,
                data: {
                    title: 'Add organization'
                }
            }
        ]
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class OrganizationsRoutingModule {
}

所以，在导航时：

http://localhost:4200/#/dashboard - 并呈现信息中心 http://localhost:4200/#/clients/organizations - 呈现客户端IndexComponent

但

http://localhost:4200/#/clients/organizations - 还渲染客户端IndexComponent http://localhost:4200/#/clients/organizations/create - 还渲染客户端IndexComponent

面包屑以正确的方式呈现。

ClientsModule

import {NgModule} from '@angular/core';

import {ClientsComponent} from './clients.component';
import {ClientsRoutingModule} from './clients.routing';

@NgModule({
    imports: [
        ClientsRoutingModule,
    ],
    declarations: [
        ClientsComponent,
    ]
})
export class ClientsModule {
}

OrganizationsModule

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';

import {OrganizationsRoutingModule} from './organizations.routing';

import {ListComponent} from './components/list.component';

import {IndexComponent} from './index.component';
import {ViewComponent} from './view.component';
import {CreateComponent} from './create.component';

@NgModule({
    imports: [
        CommonModule,
        OrganizationsRoutingModule,
    ],
    declarations: [
        ListComponent,
        IndexComponent,
        CreateComponent,
        ViewComponent
    ]
})
export class OrganizationsModule {
}

Answer 1

以下路线对我有用：

<强>客户端：

import {NgModule} from '@angular/core';
import {
    Routes,
    RouterModule
} from '@angular/router';

import {ClientsComponent} from './clients.component';

const routes:Routes = [
    {path: '', component: ClientsComponent, data: {title: 'Clients'}},
    {
        path: '',
        data: {
            title: 'Clients'
        },
        children: [
            {
                path: 'organizations',
                loadChildren: './organizations/organizations.module#OrganizationsModule'
            },
        ]
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class ClientsRoutingModule {
}

<强>组织

import {NgModule} from '@angular/core';
import {
    Routes,
    RouterModule
} from '@angular/router';

import {IndexComponent} from './index.component';
import {CreateComponent} from './create.component';

const routes:Routes = [
    { path: '', component: IndexComponent, data: { title: 'Organizations list' }},
    {
        path: '',
        data: {
            title: 'Organizations'
        },  
        children: [
            { path: 'create', component: CreateComponent, data: { title: 'Add organization' }},
            //{ path: ':id', component: ViewComponent } //if you want to show detail view by id
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class OrganizationsRoutingModule {
}

Answer 2

你的例行定义是错误的，应该如下，应用\视图\客户\组织\ organizations.routing.ts

import {NgModule} from '@angular/core';
import {
    Routes,
    RouterModule
} from '@angular/router';

import {IndexComponent} from './index.component';
import {CreateComponent} from './create.component';

const routes:Routes = [
    { path: 'create', component: CreateComponent, data: { title: 'Add organization' }},
    {
        path: '',
        children: [
           { path: '', component: IndexComponent},
           { path: ':id', component: ViewComponent } //if you want to show detail view by id
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class OrganizationsRoutingModule {
}

带子模块的Angular 4路由

2 个答案: