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 );
    });
  }
}

CloneFlightService

@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);
  }

}

Answer 1

这里有几件事：

'${cloneFlightRequest.campaignId}'应该是${cloneFlightRequest.campaignId} 使用向后的刻度线（shift + tilde）-堆栈溢出由于某种原因而无法通过。

import { RouterModule } from '@angular/router'无论您在哪里导入NgBootstrap或在本机之外使用的任何Bootstrap版本，似乎您的组件都不知道如何进入路由器模块。您将路由器导入组件是正确的。

最好创建一个组件模块或类似的组件，然后将所有组件导入其中，包括引导程序，通用模块（预期）等。这是您要导入路由器模块的地方。然后将该模块导入到app.module中，如果您正在延迟加载，则将其直接导入到延迟加载的模块中。将通用模块和浏览器模块导入您的组件目前无济于事。

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

从模态弹出窗口进行router.navigate时，this.router.navigate不是函数错误

1 个答案: