0

我被困住了，感谢您的帮助。

我是 Angular 的新手，并使用延迟加载方法来加载模块。我有一个带有路由模块的主模块，该模块包含所有子路由。如下

--- 主路由聚合器模块 ---

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

const routes: Routes = [
  {
    path: "",
    loadChildren: () =>
      import("../../views/home/home.module").then((m) => m.HomeModule),
  },
  {
    path: "personalisation",
    loadChildren: () =>
      import("../../views/personalisation/personalisation.module").then(
        (m) => m.PersonalisationModule
      ),
  },
  {
    path: "weddingcollection",
    loadChildren: () =>
      import("../../views/wedding-collection/wedding-collection.module").then(
        (m) => m.WeddingCollectionModule
      ),
  },
  {
    path: "weddingservice",
    loadChildren: () =>
      import("../../views/wedding-service/wedding-service.module").then(
        (m) => m.WeddingServiceModule
      ),
  },
  {
    path: "designerperfumes",
    loadChildren: () =>
      import("../../views/designer-perfumes/designer-perfumes.module").then(
        (m) => m.DesignerPerfumesModule
      ),
  },
  {
    path: "shop",
    loadChildren: () =>
      import("../../views/shop/shop.module").then((m) => m.ShopModule),
  },
  {
    path: "spotlight",
    loadChildren: () =>
      import("../../views/blog/blog.module").then((m) => m.BlogModule),
  },

  {
    path: "spotlight/:id",
    loadChildren: () =>
      import("../../views/single-blog-page/single-blog-page.module").then(
        (m) => m.SingleBlogPageModule
      ),
  },

  {
    path: "addblog",
    loadChildren: () =>
      import("../../views/add-blog/add-blog.module").then(
        (m) => m.AddBlogModule
      ),
  },

  {
    path: "**",
    loadChildren: () =>
      import("../../views/page-not-found/page-not-found.module").then(
        (m) => m.PageNotFoundModule
      ),
  },
];

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

同样，每个组件/模块堆栈都有自己的路由模块，如下所示

---- 带有路由定义的单个模块---

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { BlogComponent } from "./blog.component";

const routes: Routes = [{ path: "", component: BlogComponent }];

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

--- 用户链接被硬编码的组件 ----

<div id="sideMenuitems" class="sidenav-item">
  <a [routerLink]="['']">
    <h4 class="text-uppercase">Home</h4>
  </a>

  <a [routerLink]="['/personalisation']">
    <h4>Personalisation</h4>
  </a>

  <a [routerLink]="['/shop'] ">
    <h4 class="text-uppercase">Shop</h4>
  </a>

  <a [routerLink]="['/weddingcollection']">
    <h4 class="text-uppercase">Wedding Collection</h4>
  </a>

  <a [routerLink]="['/designerperfumes']">
    <h4 class="text-uppercase">Designer Perfumes</h4>
  </a>

  <a [routerLink]="['/weddingservice']">
    <h4 class="text-uppercase">Wedding Service</h4>
  </a>

  <a [routerLink]="['/spotlight']">
    <h4 class="text-uppercase">Spotlight</h4>
  </a>
</div>

问题：

当我点击链接几次（50% 的时间）时，点击不会记录对路由的更改。屏幕变为空白，经过检查，URL 保持不变。

例如，用户现在在博客（聚光灯）页面上并点击商店页面。

  1. 画面变黑，
  2. URL 仍然显示 /spotlight 而不是 /shop。
  3. 然后用户点击不同的链接说 /designerperfumes
  4. 屏幕加载设计师香水组件，一切都很好
  5. 用户现在点击商店链接 - 屏幕现在加载商店页面。

在所有 3 个（Chrome、Safari 和 Firefox 浏览器）中，这种情况发生的概率为 50%。我无法弄清楚发生了什么，因为我对角度路由和延迟加载有基本的了解。

你能帮忙吗？

谢谢。

4

1 回答 1

0

我认为您有结构问题，您可以使用“Augury”chrome 扩展程序在浏览器中查看您的应用程序路由器树。检查模块是否没有在两个地方导入。

于 2020-07-13T13:01:04.987 回答