angular - 从模式弹出窗口执行 router.navigate 时，this.router.navigate 不是函数错误

Question

我有一个组件。该组件有一个按钮，当我单击该按钮时，我正在显示一个模式弹出框。从模态弹出框我做一个表单提交，我想从模态弹出窗口做一个 router.navigate ，它显示一个错误：

this.router.navigate 不是函数错误

以下是我的模态弹出框中的代码。错误发生在这一行 this.router.navigate(['/campaigns','${cloneFlightRequest.campaignId}'])。我不知道为什么会这样。

import { CommonModule } from '@angular/common';  
import { BrowserModule } from '@angular/platform-browser';

import { Component, OnInit, ViewEncapsulation, QueryList } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap';
import { Flight, CampaignUnpaginated } from '../../models';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { propComparator } from '../../../shared/utils';
import { CloneFlightRequest } from './../../../shared/models/requests/clone-flight-request.model'
import { FlightsService } from '../../services/flights.service';
import { DataListComponent } from '../data-list/data-list.component';
import { PaginatedDataSource } from '../../data-sources';
import { Router } from '@angular/router';

export interface CloneFlightFormValue {
  flightName: string;
  campaign: CampaignUnpaginated;
}


@Component({
  selector: 'pc-clone-flight-modal',
  templateUrl: './clone-flight-modal.component.html',
  styleUrls: ['./clone-flight-modal.component.scss']
}
)
export class CloneFlightModalComponent implements OnInit {

  flight : Flight;
  campaigns: CampaignUnpaginated[];
  dataListsQuery: QueryList<DataListComponent<Flight>> | null;
  formGroup: FormGroup;
  compareResources = propComparator('id');

  showCloneForm: boolean = true;
  cloneSuccess:boolean = false;
  cloneFailure:boolean = false;
  isSubmitting:boolean = false;
  router: Router;

 constructor(public modalRef: BsModalRef, private fb: FormBuilder, 
  private flightService : FlightsService){
 }
  ngOnInit() {
    this.formGroup = this.fb.group({
    flightName: [{ value: ''},[Validators.required]],
    campaign : [ '' , Validators.required]
    });
    this.showCloneForm = true;
  }

  handleSubmit(value: CloneFlightFormValue){

   const cloneFlightRequest : CloneFlightRequest  = {

    flightName : value.flightName ,
    campaignId : value.campaign.id,
    flightId: this.flight.id 
   };

   this.isSubmitting = true;
   this.flightService.submitCloneFlight(cloneFlightRequest)
   .subscribe( data => { 
     this.showCloneForm = false;
     this.cloneSuccess = true;
     this.cloneFailure = false;
     if( this.dataListsQuery ){
      this.dataListsQuery.first.refresh();
     }
     if(this.router){
      console.log('`/campaigns/${cloneFlightRequest.campaignId}`'); 
      this.router.navigate(['/campaigns','${cloneFlightRequest.campaignId}']);
     }
   }, 
    err => {
      this.showCloneForm = false;
      this.cloneSuccess = false;
      this.cloneFailure = true;
     },
    ()=> {
      this.showCloneForm = false;
    }
    );

  }

  hideModal(){
    this.modalRef.hide();
  }

}

这是调用服务然后打开模式对话框的类

export class CampaignDetailsComponent implements OnInit {
  @ViewChild(DataListComponent) dataList: DataListComponent<Flight>;

  cloneFlight(flight: Flight) {
    this.isLoadingFlights = true;
    combineLatest(
      this.flightsService.getCampaignsToClonebyAccountId(this.campaign.account.id)
    ).subscribe( ([campaigns]) => { 
      this.isLoadingFlights = false;
      this.cloneFlightService.openModal(flight, campaigns , null , this.router );
    });
  }
}

克隆飞行服务

@Injectable()
export class CloneFlightService
 {

  bsModalRef: BsModalRef;

  constructor(private modalService: BsModalService, private flightService: FlightsService){}

   openModal(flight: Flight, campaigns: CampaignUnpaginated[],
            dataListsQuery: QueryList<DataListComponent<Flight>> | null, router: Router) {
    const initialState = {
      flight: flight,
      campaigns : campaigns,
      dataListsQuery: dataListsQuery,
      router: Router
    };
    this.bsModalRef = this.modalService.show(CloneFlightModalComponent,{ initialState});
  }

  submitCloneFlightRequest(cloneFlightRequest: CloneFlightRequest) {
    return this.flightService.submitCloneFlight(cloneFlightRequest);
  }

}

标签： angularangular-ui-router