如何从Angular中的地址路径获取id

Question

我想从我的表 flight 中打印带有 flight_id=1 的记录的数据，但是从地址路径中获取此 id，如图所示：

它有效，但前提是我像这样写this.flight_id = 1;，但我想从这里的地址获取flight_id：localhost:4200/myflight/1

这是我的桌子flight：

我已经在app.module.ts中添加了所有必需的配置

我的班级myflights-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

import { FlightService } from '../flight.service';
import { Flight } from '../flight';
import {TicketService} from '../ticket.service';
import {ActivatedRoute, Router} from '@angular/router';
import {Ticket} from '../auth/jwt-response';

@Component({
selector: 'myflights-list',
templateUrl: './myflights-list.component.html',
styleUrls: ['./myflights-list.component.css']
})
export class MyflightsListComponent implements OnInit {

flight: Flight = new Flight();
flights: Observable<Flight>;
flight_id: number;
constructor(private ticketService: TicketService, private flightService: FlightService,
          private router: Router, private route: ActivatedRoute) { }

ngOnInit() {
/*  this.flight_id = 1;*/
this.route.params.subscribe(params => { this.flight_id = params['flight_id']; });
this.flightService.getFlight(this.flight_id).subscribe(t => this.flight = t);
this.reloadData();
}

reloadData() {
this.flightService.getFlight(this.flight_id).
subscribe((response) => {
  this.flight = response;
});
}
}

flight.service.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {Flight} from './flight';

@Injectable({
providedIn: 'root'
})
export class FlightService {

private baseUrl = 'http://localhost:8080/api/flights';

constructor(private http: HttpClient) {
}

getFlight(flight_id: number): Observable<Flight> {
return this.http.get<Flight>(`${this.baseUrl}/${flight_id}`);
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MyflightsListComponent } from './myflights-list/myflights-list.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import {httpInterceptorProviders} from './auth/auth-interceptor';

 @NgModule({
 declarations: [
  AppComponent,
  MyflightsListComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [httpInterceptorProviders],
  bootstrap: [AppComponent]
  })
  export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyflightsListComponent } from './myflights-list/myflights-list.component';

const routes: Routes = [
{ path: 'myflight/:flight_id', component: MyflightsListComponent },
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})

export class AppRoutingModule { }

Answer 1

这对我有用：

ngOnInit() {
  this.route.params.subscribe(params => { this.flight_id = params['flight_id']; });
  this.reloadData();
}

Answer 2

route.snapshot 是组件创建后不久的路由信息​​的静态图像。

您可以从activatedRoute快照订阅paramMap并获取参数值：

ngOnInit() {
   this.flight_id = this.route.snapshot.paramMap.get('ticket_id');
}

Answer 3

import { ActivatedRoute, Params } from '@angular/router';

constructor(private route: ActivatedRoute){ }

ngOnInit(){
  this.route.params.subscribe((params: Params) => {
    this.flight_id = params['flight_id'];
  });
}