Angular 15 this.router.navigate is not a function, this.router.navigateByUrl is NOT a function

huangapple go评论65阅读模式
英文:

Angular 15 this.router.navigate is not a function, this.router.navigateByUrl is NOT a function

问题

这是一个简短的问题:

以下是我的代码...

import { DOCUMENT } from '@angular/common';
import { Component, HostListener, Inject, NgZone } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-my-dashboards',
  templateUrl: './my-dashboards.component.html',
  styleUrls: ['./my-dashboards.component.css']
})
export class MyDashboardsComponent {
  @HostListener('click')
  breadcrumb: any;
  lawgroup: string;

  constructor(
    @Inject(DOCUMENT)
    private router: Router,
    private ngZone: NgZone
  ) {

  }

  ngOnInit() {
    this.breadcrumb = {
      'mainlabel': '法律团队',
      'links': [
        {
          'name': '主页',
          'isLink': true,
          'link': '/dashboard/sales'
        },
        {
          'name': '法律团队仪表盘',
          'isLink': false,
          'link': '#'
        },
      ]
    };
  }

  goToLawGroupDashboard(lg: string): void {

    let fullRoute = '';
    this.lawgroup = lg;

    fullRoute = 'office/' + this.lawgroup;

    this.ngZone.run(() => {
      this.router.navigate([fullRoute]);
    });

  }

}

以下是我的HTML

<a [routerLink]="['/office', 'ABC']" class="h3adjust h3adjust-link" (click)="goToLawGroupDashboard('ABC')" title="单击转到ABC仪表盘">BLG</a>

无论我做什么...我都一直收到相同的错误。为什么?

错误 TypeError: this.router.navigate 不是一个函数
在 my-dashboards.component.ts:50:19
在 _ZoneDelegate.invoke (zone.js:375:26)
在 Object.onInvoke (core.mjs:24210:33)
在 _ZoneDelegate.invoke (zone.js:374:52)

我真的不明白。它在我有的 Angular 14 应用程序中可以工作,但在 15 中却不能。

更新:

移除 @Inject(DOCUMENT) 会消除错误,但这是我的 loadChildren 路由....

但它什么也不做。噢!

{
  path: 'office/:id',
  component: OfficeComponent
}
英文:

This is a quick question:

Here's my code...

import { DOCUMENT } from &#39;@angular/common&#39;;
import { Component, HostListener, Inject, NgZone } from &#39;@angular/core&#39;;
import { Router } from &#39;@angular/router&#39;;

@Component({
  selector: &#39;app-my-dashboards&#39;,
  templateUrl: &#39;./my-dashboards.component.html&#39;,
  styleUrls: [&#39;./my-dashboards.component.css&#39;]
})
export class MyDashboardsComponent {
  @HostListener(&#39;click&#39;)
  breadcrumb: any;
  lawgroup: string;

  constructor(
    @Inject(DOCUMENT)
    private router: Router,
    private ngZone: NgZone
  ) {

  }

  ngOnInit() {
    this.breadcrumb = {
      &#39;mainlabel&#39;: &#39;Law Groups&#39;,
      &#39;links&#39;: [
        {
          &#39;name&#39;: &#39;Home&#39;,
          &#39;isLink&#39;: true,
          &#39;link&#39;: &#39;/dashboard/sales&#39;
        },
        {
          &#39;name&#39;: &#39;Law Groups Dashboard&#39;,
          &#39;isLink&#39;: false,
          &#39;link&#39;: &#39;#&#39;
        },
      ]
    };
  }

  goToLawGroupDashboard(lg: string): void {

    let fullRoute = &#39;&#39;;
    this.lawgroup = lg;

    fullRoute = &#39;office/&#39; + this.lawgroup;

    this.ngZone.run(() =&gt; {
      this.router.navigate([fullRoute]);
    });

  }

}

here's my HTML

&lt;a [routerLink]=&quot;[&#39;/office&#39;, &#39;ABC&#39;]&quot; class=&quot;h3adjust h3adjust-link&quot; (click)=&quot;goToLawGroupDashboard(&#39;ABC&#39;)&quot; title=&quot;Click to go to the ABC Dashboard&quot;&gt;BLG&lt;/a&gt;

No matter what I do... I keep getting the same error. WHY?

ERROR TypeError: this.router.navigate is not a function
at my-dashboards.component.ts:50:19
at _ZoneDelegate.invoke (zone.js:375:26)
at Object.onInvoke (core.mjs:24210:33)
at _ZoneDelegate.invoke (zone.js:374:52)

I just don't understand. It works in an Angular 14 app I have but not in 15.

I just want to pass this "ABC" in the URL and yet, router.navigate() is not a function?

UPDATE:

Removing @Inject (DOCUMENT) took away the error but here's my loadchildren router....

But it goes nowhere. D'oh!

      {
        path: &#39;office/:id&#39;,
        component: OfficeComponent
      }

答案1

得分: 3

这一行非常错误:@Inject(DOCUMENT) private router: Router

你将会得到 Document 而不是 Router。移除 @Inject(DOCUMENT),你应该没问题!

英文:

Nah, It couldn't have worked on v14.

This line is very wrong : @Inject(DOCUMENT) private router: Router

You'll get the Document instead of the Router. Remove the

@Inject(DOCUMENT) and you should be fine !

huangapple
  • 本文由 发表于 2023年7月11日 07:45:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/76657941.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定