javascript 为什么我会收到TypeError：instanceCleanupFn不是将Angular 版本升级为15后尝试导航到新路径时的函数错误

我最近把我的Angular应用从14版升级到了15版。我有一个用于导航的材质工具栏。在工具栏中，我有多个a标签，这些标签被routerLink填充，最终链接到另一个页面。
代码如下所示：

<mat-toolbar class="toolbar" color="primary">
  <a class="logo-container" routerLink="/home"><img class="logo-image" src="ui/assets/logo_light.png"/></a>
  <a *ngFor="let item of mainMenu" class="nav-link" routerLinkActive="nav-link-selected"
     [routerLink]="item.url">
    <mat-icon aria-hidden="false" [attr.aria-label]="item.aria" class="nav-icon">{{ item.icon }}</mat-icon>
    {{ item.text }}
  </a>
  <ng-container>
    <div (mouseenter)="showSystemMenu = true" (mouseleave)="showSystemMenu = false">
      <div *ngIf="systemMenu.length > 0" class="app-nav-item">
        <a class="nav-link" [ngClass]="{'nav-link-selected' : selectedMenuItem && selectedMenuItem.menu === System }">
          <mat-icon aria-hidden="false" aria-label="System Menu" class="nav-icon">settings</mat-icon>
          System</a>
      </div>
      <div style="position:relative;">
        <div *ngIf="showSystemMenu" class="system-menu" (click)="showSystemMenu = false">
          <ng-container *ngFor="let item of systemMenu">
            <button class="dropdown-nav-link" [attr.aria-label]="item.aria" routerLinkActive="nav-link-selected"
                    [routerLink]="item.url"
                    mat-menu-item>
              <mat-icon class="dropdown-nav-icon">{{item.icon}}</mat-icon>
              {{item.text}}
            </button>
            <mat-divider></mat-divider>
          </ng-container>
        </div>
      </div>
    </div>
  </ng-container>
</mat-toolbar>

我在mainMenu和systemMenu中循环，这些数组看起来像这样：mainMenu：

[
    {text: 'Home', url: '/home', icon: 'home', aria: 'Home', menu: this.Main},
    {
      text: 'Dashboard',
      url: '/dashboard',
      icon: 'dashboard',
      aria: 'Dashboard',
      menu: this.Main
    },
    {text: 'Search', url: '/search', icon: 'zoom_in', aria: 'Search', menu: this.Main},
  ];

systemMenu：

[
    {text: 'System1', url: '/system1', icon: 'fact_check', aria: 'System1', menu: this.System},
    {
      text: 'System2',
      url: '/system2',
      icon: 'settings_input_component',
      aria: 'System2',
      menu: this.System
    },
    {text: 'System3', url: '/system3', icon: 'label', aria: 'System3', menu: this.System},
    {text: 'System4', url: '/system4', icon: 'groups', aria: 'System4', menu: this.System},
    {text: 'System5', url: '/system5', icon: 'query_stats', aria: 'System5', menu: this.System},
    {text: 'System6', url: '/system6', icon: 'science', aria: 'System6', menu: this.System},
    {
      text: 'System7',
      url: '/system7',
      icon: 'description',
      aria: 'System7',
      menu: this.System
    },
    {text: 'System8', url: '/system8', icon: 'folder_open', aria: 'System8', menu: this.System},
    {text: 'System9', url: '/system9', icon: 'psychology_alt', aria: 'System9', menu: this.System}
  ];

所有这些路由都存在，但当我尝试在它们之间单击时，出现以下错误：

ERROR Error: Uncaught (in promise): TypeError: instanceCleanupFn is not a function
TypeError: instanceCleanupFn is not a function
    at processCleanups (core.mjs:5952:13)
    at cleanUpView (core.mjs:5893:9)
    at destroyViewTree (core.mjs:5725:17)
    at destroyLView (core.mjs:5870:9)
    at RootViewRef.destroy (core.mjs:11797:9)
    at ComponentRef.destroy (core.mjs:12218:23)
    at RouterOutlet.deactivate (router.mjs:2622:28)
    at ActivateRoutes.deactivateRouteAndOutlet (router.mjs:2996:28)
    at ActivateRoutes.deactivateRouteAndItsChildren (router.mjs:2969:18)
    at ActivateRoutes.deactivateRoutes (router.mjs:2958:22)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:24165:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at drainMicroTaskQueue (zone.js:585:35)
    at ZoneTask.invokeTask [as invoke] (zone.js:491:21)
    at invokeTask (zone.js:1661:18)

不确定为什么我会得到这个错误，在Angular v14，这工作没有问题。

为了防止其他人遇到这个问题，我已经找到了导致这个问题的原因。经过几个小时的挖掘，我发现罪魁祸首是不正确的使用mat-icon-button。
在很多页面上，按钮都是这样的：

<button mat-icon mat-icon-button>
  <mat-icon>name_of_icon</mat-icon>
</button>

当导航到一个带有这些按钮的页面，然后试图离开该页面时，Angular在清理和销毁它们时遇到了问题，因为它们的格式不正确。这些按钮最终会出现在示例清理函数所包含的项目数组中，如QueryItems。所以本质上，Angular试图运行的函数实际上只是材质按钮的一个对象，而对象不是函数，因此出现了错误。
为了解决这个问题，我需要从按钮中删除mat-icon。所以你的按钮应该看起来像这样：

<button mat-icon-button>
   <mat-icon>name_of_icon</mat-icon>
</button>

现在，垫子图标按钮的格式正确，问题已解决。

javascript 为什么我会收到TypeError：instanceCleanupFn不是将Angular 版本升级为15后尝试导航到新路径时的函数错误

1条答案

相关问题

热门标签

最新问答