typescript - Angular 5 - Hent id fra URL

Jeg er ny med Angular 5. Så jeg prøver å hente ut ID-en fra URL-en slik at jeg kan sende den til en PHP-fil og deretter få tilbake noen data fra en database.

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Router, ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-a-usuario',
  templateUrl: './a-usuario.component.html',
  styleUrls: ['./a-usuario.component.css']
})
export class AUsuarioComponent implements OnInit {
  urlop = 'http://localhost/crudu/mostrarID.php';
  datos: any;
  id: number;


  constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = params['id']; // (+) converts string 'id' to a number
    });
    console.log(this.id);
  }
}

Jeg har prøvd alle løsninger, men det fungerer ikke (i konsollloggen vises det NaN eller Undefined)

const appRoutes: Routes = [
  {'path': 'admin', component: AdminComponent},
  {'path': 'eUsuario', component: AUsuarioComponent, children: [{
    path: ':id',
      component: AUsuarioComponent
    }]},
  {'path': 'iUsuario', component: IUsuarioComponent},
  {path: '',
    redirectTo: '/',
    pathMatch: 'full'},
  ];

Svar #1

Alt du trenger å gjøre er å flytte console.log inn i subscribe for å se verdien. Å prøve å få tilgang til verdien utenfor params.subscribe vil ikke fungere, som du har oppdaget. Se nedenfor.

ngOnInit() {
    this.routeListener = this.route.params.subscribe(params => {
      this.id = +params['id']; // (+) converts string 'id' to a number         
      console.log(this.id);
    });
  }

Senere inne i ngOnDestroy, avslutt abonnementet for å forhindre minnelekkasjer, slik som:

ngOnDestroy() {
  this.routeListener.unsubscribe();
}

Eventuelle andre handlinger du vil utføre med det som returneres fra params['id'] verdien må også skje innenfor subscribe.

Svar #2

Jeg fant løsningen.

{'path': 'eUsuario', component: AUsuarioComponent, children: [{
    path: ':id',
      component: AUsuarioComponent
    }]},

I stedet for å ha en barnerute, kan du gjøre det direkte.

 {'path': 'eUsuario/:id', component: AUsuarioComponent},

Relaterte artikler