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），路由将失败，例如：

错误错误：未捕获（在承诺中）：TypeError：无法读取属性＆＃39;组件＆＃39;为null TypeError：无法读取属性＆＃39;组件＆＃39;为null 在PreActivation.webpackJsonp ... / .. / .. / router / @angular / root.es5.js.PreActivation.traverseRoutes（router.es5.js：4346）在router.es5.js：4308 在Array.forEach（）在PreActivation.webpackJsonp ... / .. / .. / router / @ angular / boot.es5.js.PreActivation.traverseChildRoutes（router.es5.js：4307）在PreActivation.webpackJsonp ... / .. / .. / router / @angular / root.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也可能暗示您的护卫队可能存在问题。因此，如果需要，您可能需要仔细检查路由配置并保护和调试代码。

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

2 个答案: