this.router.navigate не является ошибкой функции при выполнении 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 );
    });
  }
}

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';