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

Question

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

两个路由模块的组件都正确呈现，问题是对于 "not working" 路由，如果我通过单击路径进行导航，页面似乎会重新加载...在控制台中，我看到浏览器再次下载了 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/other 内容。

/admin/dashboard1
/admin/dashboard2

哪里出错了？感谢支持

Answer 1

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

无效方式：

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

工作方式：

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

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

Answer 2

您可以像这样转换您的 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 项目遵循树形结构。所以最好在同一个模块下声明相关任务（比如 AdminModule 中的组件 Dashboard1 和 Dashboard2）并在其 routing.module 文件中指定路由。

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

{ path: 'starter', component: StarterComponent }

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

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

但是你没有提到如果找到 url starter2 该怎么办。

如果你用你的代码检查这些，我相信你很快就能解决你的问题。

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

Angular2+ Routing - Content Download while navigating

angular-routing

angular

StartRoutingModule - 不工作

AdminRoutingModule - 工作

应用程序路由-module.ts