如何从Angular的地址路径中获取ID [英] How to get id from adress path in Angular

问题描述

我想从我的表 flight 中使用 flight_id = 1 打印记录数据，但是要从地址路径中获取此ID，例如在图片上:

它有效，但是仅当我这样写 flight_id = 1; 时，但我想从此处的地址中获取 flight_id :本地主机:4200/myflight/1

这是我的桌子航班:

我已在 app.module.ts

中添加了所有必需的配置

我的班级 myflights-list.component.ts

 从'@ angular/core'导入{Component，OnInit};从"rxjs"导入{Observable}；从"../flight.service"导入{FlightService}；从"../flight"导入{Flight}；从"../ticket.service"导入{TicketService}；从"@ angular/router"导入{ActivatedRoute，Router}；从"../auth/jwt-response"导入{Ticket}；@零件({选择器:"myflights-list"，templateUrl:"./myflights-list.component.html"，styleUrls:['./myflights-list.component.css']})导出类MyflightsListComponent实现OnInit {flight:Flight = new Flight();航班:可观察的<航班> ;；flight_id:数字；构造函数(private ticketService:TicketService，private flightService:FlightService，专用路由器:路由器，专用路由: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).subscription((response)=> {this.flight =回应；});}} 

flight.service.ts

 从'@ angular/core'导入{Injectable};从'@ angular/common/http'导入{HttpClient};从'rxjs'导入{Observable};从"./flight"导入{Flight}；@Injectable({providerIn:'root'})导出类FlightService {私人baseUrl ='http://localhost:8080/api/flights';构造函数(私有http:HttpClient){}getFlight(flight_id:数字):Observable< Flight>{返回this.http.get< Flight>(`$ {this.baseUrl}/$ {flight_id}`);} 

app.module.ts

 从'@ angular/platform-b​​rowser'导入{BrowserModule};从'@ angular/core'导入{NgModule};从"@ angular/forms"导入{FormsModule}；从'./app.component'导入{AppComponent};从"./myflights-list/myflights-list.component"导入{MyflightsListComponent}；从'./app-routing.module'导入{AppRoutingModule};从'@ angular/common/http'导入{HttpClientModule};从"./auth/auth-interceptor"导入{httpInterceptorProviders}；@NgModule({声明:[AppComponent，MyflightsListComponent，]，进口:[BrowserModule，FormsModule，AppRoutingModule，HttpClientModule]，提供者:[httpInterceptorProviders]，引导程序:[AppComponent]})导出类AppModule {} 

app-routing.module.ts

 从'@ angular/core'导入{NgModule};从'@ angular/router'导入{RouterModule，Routes};从"./myflights-list/myflights-list.component"导入{MyflightsListComponent}；const路线:路线= [{路径:"myflight/:flight_id"，组件:MyflightsListComponent}，];@NgModule({导入:[RouterModule.forRoot(routes)]，出口:[RouterModule]})导出类AppRoutingModule {} 

解决方案

这对我有用:

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

I want to print data for the record with flight_id=1 from my table flight, but get this id from the adress path, like on the picture:

It works, but only if I write smth like this this.flight_id = 1;, but I want to get the flight_id from the address here: localhost:4200/myflight/1

Here is my table flight:

I've added all required configuration in app.module.ts

My class 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 { }

解决方案

This works for me:

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

这篇关于如何从Angular的地址路径中获取ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！