错误类型错误：commands.find 不是函数

Question

我想将用户从一条路线导航到下一条路线。但是当我调用Router类的navigate函数时，就会出现这个错误。

this.router.navigate('/');

我已经在 Top

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

上导入了类，并在组件的构造函数上初始化了像

private router: Router

这样的对象。

该功能在其他组件中工作正常。

这是因为我已经在路径 / 中并导航到相同的路径吗？

请帮助我理解。

控制台日志错误：图像文件

组件代码：

import {Component, Inject, OnInit} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {NgxDrpOptions, PresetItem, Range} from 'ngx-mat-daterange-picker';
import {APP_CONFIG, AppConfig} from '../../config/app.config';
import {IAppConfig} from '../../config/iapp.config';
import {ProgressBarService} from '../shared/progress-bar.service';
import {HeroService} from '../../dashboard/shared/hero.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-exp',
  templateUrl: './exp.component.html',
  styleUrls: ['./exp.component.scss']
})

export class ExpComponent implements OnInit {

  appConfig: any;
  menuItems: any[];
  progressBarMode: string;
  currentLang: string;
  range:Range = {fromDate:new Date(), toDate: new Date()};
  options:NgxDrpOptions;
  presets:Array<PresetItem> = [];

  constructor(@Inject(APP_CONFIG) appConfig: IAppConfig,
              private progressBarService: ProgressBarService,
              private translateService: TranslateService,
              private heroService: HeroService,
              private router: Router) {
    this.appConfig = appConfig;
  }

  ngOnInit() {
    this.setDefaultValues();
  }

  setDefaultValues() {
    this.setCalender();
    if (!this.heroService.getCompanyId()) {
      this.heroService.setCompanyId(11);
    }
    if (!this.heroService.getLocationId()) {
      this.heroService.setLocationId(null);
    }
    if (!this.heroService.getStartDate() || !this.heroService.getEndDate()) {
      this.heroService.setDates(Date.now()-86400, Date.now());
    }
  }

  setCalender() {
    const today = new Date();
    const fromMin = new Date(today.getFullYear(), today.getMonth()-11, 1);
    const fromMax = new Date(today.getFullYear(), today.getMonth(), today.getDate()-1);
    const toMin = new Date(today.getFullYear(), today.getMonth()-11, 2);
    const toMax = new Date(today.getFullYear(), today.getMonth(), today.getDate());

    this.setupPresets();
    this.options = {
                presets:this.presets,
                format: 'Date',
                range: {fromDate:fromMax, toDate:toMax},
                applyLabel: "Submit",
                calendarOverlayConfig: {
                  shouldCloseOnBackdropClick: false
                },
                cancelLabel: "Cancel",
                excludeWeekends:true,
                fromMinMax: {fromDate:fromMin, toDate:fromMax},
                toMinMax: {fromDate:toMin, toDate:toMax}
              };
  }

  //handler function that receives the updated date range object
  updateRange(range:Range) {
    this.range = range;
    this.heroService.setDates(this.range.fromDate, this.range.toDate);
    this.router.navigate('/');
  }

  updateLocation(location_id) {
    this.heroService.setLocationId(location_id);
  }  

  //helper function to create initial presets
  setupPresets() {

    const backDate = (numOfDays) => {
      const today = new Date();
      return new Date(today.setDate(today.getDate() - numOfDays));
    }

    const today = new Date();
    const yesterday = backDate(1);
    const minus7 = backDate(7)
    const minus30 = backDate(30);
    const currMonthStart = new Date(today.getFullYear(), today.getMonth(), 1);
    const currMonthEnd = new Date(today.getFullYear(), today.getMonth()+1, 0);
    const lastMonthStart = new Date(today.getFullYear(), today.getMonth()-1, 1);
    const lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0);

    this.presets =  [
      {presetLabel: "Yesterday", range:{fromDate:yesterday, toDate:today}},
      {presetLabel: "Last 7 Days", range:{fromDate: minus7, toDate:today}},
      {presetLabel: "Last 30 Days", range:{fromDate: minus30, toDate:today}},
      {presetLabel: "This Month", range:{fromDate: currMonthStart, toDate:currMonthEnd}},
      {presetLabel: "Last Month", range:{fromDate: lastMonthStart, toDate:lastMonthEnd}}
    ]
  }
}

Answer 1

1. Navigate 需要像这样的字符串数组

   this.routes.navigate(["/home"]);

2. 第二种解决方案可能是

   this.router.navigateByUrl("/");