Angular2 +路由 - 内容导航时下载

Question

我正在为2个路由模块实现完全相同的路由。

为路由模块正确呈现组件，问题在于“不工作”路由， 如果我通过点击路径导航似乎页面重新加载...在控制台中我看到浏览器再次下载js文件（bundle / polyfil等...）

StartRoutingModule - 无法正常工作

import { OrderCreateComponent } from '../order-create/order-create.component';
import { StarterComponent } from './../starter.component';
import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AdminDashboard1Component } from "../../admin/admin-dashboard1/admin-dashboard1.component";

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'app',
        component: StarterComponent,
        children: [
          {
            path: '',
            component: AdminDashboard1Component            
          },
          {
            path: 'OrderCreate',
            component: OrderCreateComponent
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class StarterRoutingModule { }  

AdminRoutingModule - 正在运作

import { AdminDashboard2Component } from './../admin-dashboard2/admin-dashboard2.component';
import { AdminDashboard1Component } from './../admin-dashboard1/admin-dashboard1.component';
import { AdminComponent } from './../admin.component';
import { NgModule, Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'admin',
        component: AdminComponent,
        children: [
          {
            path: '',
            redirectTo: 'dashboard1',
            pathMatch: 'full'
          },
          {
            path: 'dashboard1',
            component: AdminDashboard1Component
          },
          {
            path: 'dashboard2',
            component: AdminDashboard2Component
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class AdminRoutingModule { } 

的应用程序的路由-module.ts

import { StarterComponent } from './../starter/starter.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { StarterRoutingModule } from "../starter/starter-routing/starter-routing.module";
import { AdminRoutingModule } from "../admin/admin-routing/admin-routing.module";


@NgModule({
  imports: [
    AdminRoutingModule ,
    StarterRoutingModule,
    RouterModule.forRoot([
//      { path: '', redirectTo: 'starter2', pathMatch: 'full' },
      { path: 'starter', component: StarterComponent }  
    ])
  ],
  declarations: [],
  exports: [ RouterModule]
})
export class AppRoutingModule { } 

通过这些路径，浏览器再次下载js / image等...（似乎重新加载）

/app/
/app/OrderCreate

使用这些路径，应用程序只需加载正确的组件，而无需再次下载js /其他内容。

/admin/dashboard1
/admin/dashboard2

错误在哪里？ 感谢支持

Answer 1

您可以像这样转换app-routing.module.ts文件

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

const routes: Routes = [
                          {
                              path: '',
                              loadChildren: './starter/starter.module#StarterModule
                          },
                          {
                              path: 'admin',
                              loadChildren: './admin/admin.module#AdminModule
                          },];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Angular项目遵循树结构。因此，在同一模块（如组件Dashboard1和AdminModule中的Dashboard2）中声明相关任务并在其routing.module文件中指定路由是很好的。

假设您没有功能模块（比如单个视图作为主页）。您可以在app.module.ts文件中定义此类组件，并在导入该组件之后在app-routing.module.ts文件中指定其路由：

{ path: 'starter', component: StarterComponent }

如果使用属性redirectTo，则应预定义指定的路径。在您的代码中：

{ path: '', redirectTo: 'starter2', pathMatch: 'full' }

但如果找到url starter2，你就不会提及该做什么。

如果您使用代码检查这些内容，我们确定您可以尽快解决问题。

Answer 2

问题在于我在测试路由时如何实现链接：

不工作方式：

<a href="/app/OrderCreate">OrderCreate</a>

工作方式：

<a routerLink="/app/OrderCreate">OrderCreate</a>

使用 routerLink 属性，所有内容都正常加载，无需重新加载页面