在Angular 2中导航按钮单击时出错

Question

我正在尝试在单击按钮时使用 navigateurl 属性，但它似乎已损坏。我收到以下错误：

:53806/node_modules/@angular/core/bundles/core.umd.js:1389 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'component' of null
TypeError: Cannot read property 'component' of null
    at PreActivation.setupRouteGuards (:53806/node_modules/@angular/router/bundles/router.umd.js:3601)
    at eval (:53806/node_modules/@angular/router/bundles/router.umd.js:3550)
    at Array.forEach (<anonymous>)
    at PreActivation.setupChildRouteGuards (:53806/node_modules/@angular/router/bundles/router.umd.js:3549)
    at PreActivation.initialize (:53806/node_modules/@angular/router/bundles/router.umd.js:3483)
    at MapSubscriber.eval [as project] (:53806/node_modules/@angular/router/bundles/router.umd.js:5311)
    at MapSubscriber._next (:53806/node_modules/rxjs/operators/map.js:79)
    at MapSubscriber.Subscriber.next (:53806/node_modules/rxjs/Subscriber.js:89)
    at MergeMapSubscriber.notifyNext (:53806/node_modules/rxjs/operators/mergeMap.js:145)
    at InnerSubscriber._next (:53806/node_modules/rxjs/InnerSubscriber.js:23)
    at PreActivation.setupRouteGuards (:53806/node_modules/@angular/router/bundles/router.umd.js:3601)
    at eval (:53806/node_modules/@angular/router/bundles/router.umd.js:3550)
    at Array.forEach (<anonymous>)
    at PreActivation.setupChildRouteGuards (:53806/node_modules/@angular/router/bundles/router.umd.js:3549)
    at PreActivation.initialize (:53806/node_modules/@angular/router/bundles/router.umd.js:3483)
    at MapSubscriber.eval [as project] (:53806/node_modules/@angular/router/bundles/router.umd.js:5311)
    at MapSubscriber._next (:53806/node_modules/rxjs/operators/map.js:79)
    at MapSubscriber.Subscriber.next (:53806/node_modules/rxjs/Subscriber.js:89)
    at MergeMapSubscriber.notifyNext (:53806/node_modules/rxjs/operators/mergeMap.js:145)
    at InnerSubscriber._next (:53806/node_modules/rxjs/InnerSubscriber.js:23)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at zone.js:873
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (:53806/node_modules/@angular/core/bundles/core.umd.js:4659)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at ZoneTask.invokeTask [as invoke] (zone.js:503)
    at invokeTask (zone.js:1540)
defaultErrorLogger @ :53806/node_modules/@angular/core/bundles/core.umd.js:1389

我的打字稿文件代码是：-

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: 'src/app/dashboard/app.component.html'
})

export class AppComponent {
    name: string = 'Angular';

    constructor(private router: Router) { }

    btnClick() {
        console.log("Button has been clicked");
        this.router.navigateByUrl('/exportPdf');
    };
}

我要重定向的页面，打字稿代码是：-

import { Component } from '@angular/core'


@Component({
    selector: 'exportPdf',
    templateUrl: 'src/app/exportPdf/exportPdf.component.html'
})


export class ExportPdfComponent { name: string = "Export View to Pdf" }

Module.ts 文件：-

这是我的 module.ts 代码

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './dashboard/app.component';
import { ExportPdfComponent } from './exportPdf/exportPdf.component';

const appRoutes: Routes = [
    { path: 'Dashboard', component: AppComponent },
    { path: 'ExportPdf', component: ExportPdfComponent }
]

@NgModule({
    imports: [BrowserModule, FormsModule, RouterModule.forRoot(appRoutes)],
    declarations: [AppComponent, ExportPdfComponent],
    bootstrap: [AppComponent, ExportPdfComponent]
})

export class AppModule {
}

如果你们之前遇到过这种错误，请告诉我你们是如何解决的。

提前致谢。

Answer 1

如果当前不存在路由器出口（例如，由于其他一些错误，它将从内容中删除）并且设置了预激活规则（例如 AuthGuard），则路由将失败并显示如下内容：

ERROR 错误：未捕获（承诺中）：TypeError：无法读取 null 的属性“组件” TypeError：无法读取 null 的属性“组件” 在 PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4346) 在 router.es5.js:4308 在 Array.forEach () 在 PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4307) 在 PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4338) [..]

请检查以解决您的问题。

Answer 2

如果您能向我们展示您的路由配置以及您的路由守卫，将会更有帮助。通常，路由配置可以在app.module.ts文件中找到，代码类似这样

const appRoutes: Routes = [
  { path: 'exportPdf', component: ExportPdfComponent },
  ...
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  ...
})
export class AppModule { }

PreActivation.setupRouteGuards 也可能表明您的路由守卫可能存在问题。因此，您可能需要仔细检查路由配置，并在必要时保护和调试代码。

Answer 3

使用 routerLink 属性

<button type="button" mat-raised-button color="warn" routerLink="/route">