无法读取 Angular 中未定义的属性 'navigate'

Question

关于 Angular 这个错误的所有帮助文章都说要确保有人像这样注入 'Router'：

构造函数（路由器：路由器....

我做到了。

我不确定还能做什么。在开始对路由进行故障排除之前，我必须解决这个问题。

我的目标：允许用户导航到子路由。允许用户在点击时关闭当前路线。

因此当前地址为： https://localhost:4200/layout/usermanagement/(newuser:newuser/(newuserinput:newuserinput))

点击后我会被转到： https://localhost:4200/layout/usermanagement/(newuser:newuser/(newuserorginfo:newuserorginfo))

此外，在点击另一个按钮后，我将被转到： https://localhost:4200/layout/usermanagement/(newuser:newuser))

这是我的组件、模块和模板。

COMPONENT 新用户-input.component.ts

import { Component, OnInit } from '@angular/core';
import { slideToRight } from '../../../../router.animations';
import { Router, ActivatedRoute, UrlSegment } from '@angular/router';

@Component({
  selector: 'app-new-user-input',
  templateUrl: './new-user-input.component.html',
  styleUrls: ['./new-user-input.component.css'],
  animations: [slideToRight()]
})
export class NewUserInputComponent implements OnInit {
  router: Router;

  constructor(router: Router, r: ActivatedRoute) {
    r.url.subscribe((s: UrlSegment[]) => {
      console.log("url", s); //https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab
    });
  }

  ngOnInit() {
  }

  displaySibling() {
    console.log(this.router);
    this.router.navigate(['../', { outlets: { newuserorginfo: ['newuserorginfo'] } }])
  }

  closeBlade() {
    this.router.navigate([{ outlets: { newuserinput: null } }]);
  }

}

模块用户-management.module.ts

import { HttpModule, JsonpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
// import 'rxjs/add/operator/map';
import { NgModule, Type, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

import { GridAllModule } from '@syncfusion/ej2-ng-grids';
import { HttpClientModule } from '@angular/common/http';
import {
  GridModule, ToolbarService, EditService, SortService, GroupService, FilterService, PageService,
  ContextMenuItem, PdfExportService, ExcelExportService, ContextMenuService, ResizeService,
  DataSourceChangedEventArgs, DataStateChangeEventArgs
} from '@syncfusion/ej2-ng-grids';


import { UserManagementComponent } from './user-management.component';
import { PageHeaderModule } from './../../shared/page-header/page-header.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


// import { NewUserComponent } from './new-user/new-user.component';
// import { PendingUserComponent } from './pending-user/pending-user.component';
// import { ProcessUserComponent } from './process-user/process-user.component';
// import { NewUserInputComponent } from './new-user/new-user-input/new-user-input.component';

import { RouterModule } from '@angular/router';
import { NewUserOrgInfoComponent } from './new-user/new-user-org-info/new-user-org-info.component';
import { NewUserSupervisorInfoComponent } from './new-user/new-user-supervisor-info/new-user-supervisor-info.component';
import { NewUserSecurityInfoComponent } from './new-user/new-user-security-info/new-user-security-info.component'; //??????????

@NgModule({
  imports: [
    CommonModule,
    PageHeaderModule,
    GridModule,
    RouterModule,
    NgbModule
  ],
  declarations: [UserManagementComponent, NewUserOrgInfoComponent, NewUserSupervisorInfoComponent, NewUserSecurityInfoComponent],
  providers: [EditService, ToolbarService, SortService, GroupService, FilterService, PageService,
    ContextMenuService, PageService, ResizeService, PdfExportService, ExcelExportService]
})
export class UserManagementModule {
}

模板新用户-input.component.html

<div class="blade" [@routerTransition]>
  <div class="blade-header">
    <h3>User Information</h3>
    <div class="window-functions">
      <i class="fa fa-window-minimize"></i>
      <i class="fa fa-window-restore"></i>
      <i class="fa fa-window-maximize"></i>
      <!-- <a routerLink='/layout/usermanagement/(newuser:newuser)' routerLinkActive='router-link-active'> -->
      <i (click)='closeBlade()' class="fa fa-window-close"></i>
      <!-- </a> -->
    </div>
  </div>
  <form action="submit">
    <!-- <label for="firstname">First Name:</label> -->
    First name:
    <br>
    <input type="text" name="firstname" value="Richard">
    <br> Last name:
    <br>
    <input type="text" name="lastname" value="Dawkins">
    <br> Cell phone:
    <br>
    <input type="tel" name="cellphone" value="(585) 271-8888">
    <br> Office phone:
    <br>
    <input type="tel" name="officephone" value="(585) 271-8887">
    <br> Fax:
    <br>
    <input type="tel" name="fax" value="(585) 271-8886">
    <br> City:
    <br>
    <input type="text" name="city" value="City">
    <br> State:
    <br>
    <input type="text" name="state" value="New York">
    <br> Requester title:
    <br>
    <br>
    <!-- <input type="submit" value="Next" disabled="true"> -->
    <input class="next-button" type="submit" value="Next" (click)="displaySibling()">
    <!-- <input type="submit" value="Next" [routerLink]="[{ outlets: { newuserorginfo: ['newuserorginfo '] } } ]" routerLinkActive='active '> -->
  </form>
</div>
<router-outlet></router-outlet>
<router-outlet name="newuserorginfo"></router-outlet>

Answer 1

错误发生是因为 router 不是组件 class 的成员。在构造函数中注入服务时指定访问级别（private、protected 或 public）将使 router 成为 class 的属性并解决问题：

constructor(private router: Router, ...)

Answer 2

我遇到的问题是注销方法的句柄错误。让我告诉你：

public logout(): Observable<any> {
    return this.http
      .get('logout_url')
      .pipe(
        map(a => this.mapLogoutResult(a)),
        catchError(this.handleError)
      );
  }

和 handleError:

public handleError(err) {
    localStorage.setItem('isAuthenticated', 'false');
    if (this.heartbeatOn) {
      this.heartBeat.next(false);
    }
    this.router.navigate(['/login']);
    throwError(err);
    return of({ failure: err });
  }

我在这里不断收到：

Cannot read property 'navigate' of undefined

我通过更改在 catchError

中调用 handleError 的方式解决了这个问题

    catchError(err => this.handleError(err))

catchError 中的箭头函数定义了范围，因此看起来像没有箭头函数的函数没有正确的输入。

无法读取 Angular 中未定义的属性 'navigate'

Cannot read property 'navigate' of undefined in Angular

angular

angular-ui-router

single-page-application

angular-routing

无法读取 Angular 中未定义的 属性 'navigate'

Cannot read property 'navigate' of undefined in Angular

angular

angular-ui-router

single-page-application

angular-routing

无法读取 Angular 中未定义的属性 'navigate'