英文:
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 '@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': 'Law Groups',
'links': [
{
'name': 'Home',
'isLink': true,
'link': '/dashboard/sales'
},
{
'name': 'Law Groups Dashboard',
'isLink': false,
'link': '#'
},
]
};
}
goToLawGroupDashboard(lg: string): void {
let fullRoute = '';
this.lawgroup = lg;
fullRoute = 'office/' + this.lawgroup;
this.ngZone.run(() => {
this.router.navigate([fullRoute]);
});
}
}
here's my HTML
<a [routerLink]="['/office', 'ABC']" class="h3adjust h3adjust-link" (click)="goToLawGroupDashboard('ABC')" title="Click to go to the ABC Dashboard">BLG</a>
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: 'office/:id',
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 !
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论