【问题标题】:Angular 8 - Cannot match any routes. URL Segment: 'javascript : void(0)'Angular 8 - 无法匹配任何路线。 URL 段:'javascript : void(0)'
【发布时间】:2020-11-06 00:35:07
【问题描述】:

我有一个 Angular 8 应用程序,我在其中使用外部依赖项,它在我的应用程序中生成分页表。我只需要将 json 数据传递给它,它会为我完成剩下的工作。

所以分页表生成下一页和上一页的链接。如果我悬停它,它将显示localhost:4200/javascript : void(0)。据我所知,我的应用程序应该忽略此超链接,因为底层脚本必须为此具有 onClick 功能。

但我仍然遇到错误。

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'javascript%20:%20void%280%29'
Error: Cannot match any routes. URL Segment: 'javascript%20:%20void%280%29'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2459)
    at CatchSubscriber.selector (router.js:2440)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:59)
    at ThrowIfEmptySubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:79)
    at resolvePromise (zone.js:852)
    at resolvePromise (zone.js:809)
    at zone.js:913
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:26247)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1693)

下面是我的app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';


const routes: Routes = [
  {
    path: HEALTH,
    pathMatch: FULL,
    loadChildren: './health/health.module#HealthModule'
  },
  {
    path: EMPTY_STRING,
    resolve: {
      LoggedInDetail: LoggedInDetailResolve
   },
    component: FullPageLayoutComponent,
    children: [
      {
        path: '',
        redirectTo: 'index',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: EMPTY_STRING,
    component: AppComponent,
    children: [
      {
        path: TEMPLATE_ROUTE,
        component: TemplateComponent
      }
    ]
  }

];

@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule],
  providers: [LoggedInDetailResolve]
})
export class AppRoutingModule { }

请注意我使用的是基于哈希的 URL

imports: [RouterModule.forRoot(routes, { useHash: true })],

【问题讨论】:

  • 您是否将 HTML 动态添加到 DOM 中? Angular 将尝试对其进行清理并删除 javascript。听起来您已将 href 设置为 javascript void,而 Angular 正在对其进行清理,因此它只是一个字符串,这就是它试图将其添加到 URL 的原因。
  • 你能创建一个 stackblitz 演示吗?
  • 请分享您的分页码。你的路由方式有问题,你不能使用javascript : void(0)之类的东西!

标签: angular angular8 angular-routing angular-router


【解决方案1】:

请从您的代码中删除 pathMatch: FULL

或者你可以使用 pathMatch: 'prefix'

pathMatch:'full': 在这种情况下,当应用程序在 localhost:4200(或某些服务器)上启动时,默认页面将是欢迎屏幕,因为 URL 将为 https://本地主机:4200/

如果 https://localhost:4200/surendra 这将重定向到 pageNotFound 屏幕,因为路径:'**' 通配符

pathMatch:'prefix': 如果路由有 { path: '', redirectTo: 'initial', pathMatch: 'prefix' },现在这将永远不会到达通配符路由,因为每个 url将匹配路径:'' 定义。

【讨论】:

  • 这对我不起作用。 FULL 和 Prefix 有什么区别
  • 你是否从你的父母那里删除了 pathMatch
  • 让我试试看。
  • 我尝试了这两个选项,但仍然不适合我。
猜你喜欢
  • 1970-01-01
  • 2023-01-09
  • 2018-10-03
  • 1970-01-01
  • 2018-09-29
  • 2020-06-22
  • 2017-09-25
  • 2019-05-01
  • 1970-01-01
相关资源
最近更新 更多