Question

在我的AppModule中，我有以下内容（删除不必要的代码）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';

import { CompanyModule } from './main/content/company/company.module';
import { CustomersModule } from './main/content/company/customers/customers.module';


const appRoutes: Routes = [
  {
    path        : 'company',
    loadChildren: './main/content/company/company.module#CompanyModule'
  },
  {
    path        : '**',
    redirectTo  : 'company/dashboards/default'
  }
];

@NgModule({
    declarations: [
        AppComponent
    ],
    imports     : [
        RouterModule.forRoot(appRoutes, { enableTracing: true }),
    ],
    bootstrap   : [
        AppComponent,
        CompanyModule,
        CustomersModule
    ]
})
export class AppModule
{
}

然后我有CompanyModule：

const routes = [
    {
        path        : 'products',
        loadChildren: './products/products.module#ProductsModule'
    },
    {
        path        : 'customers',
        loadChildren: './customers/customers.module#CustomersModule'
    },
];

@NgModule({
    imports     : [
        FuseSharedModule,
        RouterModule.forChild(routes)
    ],
    declarations: []
})
export class CompanyModule
{
}

CustomersModule（ProductsModule相似，此处未包含）：

const routes = [
    {
        path        : 'dashboard',
        loadChildren: './dashboard/dashboard.module#CustomersDashboardModule'
    },
    {
        path        : 'customer',
        loadChildren: './customer/customerdetail.module#CustomerDetailModule'
    },
];

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

应用程序启动，我在CompanyModule中看到了该组件。 我有一个按钮，可以将我带到＆＃39; CustomersModule＆＃39; 。当我点击它时，我看到path发生了变化。但是，我得到一个空页。

(click)事件的代码是：

gotoCustomersDashboard()
{
    this.router.navigate(['company/customers/dashboard']);
}

CustomerDetailComponent：

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

import { CustomerDetailService } from './customer.service';
import { CustomerDetailComponent } from './customer.component';

const routes: Routes = [
    {
        path     : 'customer',
        component: CustomerDetailComponent,
        resolve  : {
            service: CustomerDetailService
        }
    }
];

@NgModule({
    declarations: [
        CustomerDetailComponent
    ],
    imports     : [
        RouterModule.forChild(routes),
    ],
    providers   : [
        CustomerDetailService
    ]
})
export class CustomerDetailModule
{

路由器跟踪显示路由器事件＆＃39; NavigationEnded＆＃39;一切都很好。也没有其他错误。

上述路由配置是否遗漏了什么？

Answer 1

点击按钮时尝试此操作：this.router.navigate(['company/customers/customer/customer']);

无法使Angular路由工作

1 个答案: