typescript - Angular 5 - Extrahera id från URL

Jag är ny med Angular 5. Så jag försöker hämta ID från URL:en så att jag kan skicka det till en PHP-fil och sedan få tillbaka data från en databas.

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

Jag har försökt alla lösningar men det fungerar inte (i konsolloggen visas 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

Allt du behöver göra är att flytta console.log inuti subscribe för att se värdet. Att försöka komma åt värdet utanför params.subscribe kommer inte att fungera, som du har upptäckt. Se nedan.

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

Senare inuti ngOnDestroy, avregistrera för att förhindra minnesläckor, som:

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

Eventuella andra åtgärder du vill vidta med det som returneras från params['id']-värdet måste också ske inom subscribe.

Svar #2

Jag hittade lösningen.

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

Istället för att ha en barnrutt kan du göra det direkt.

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

Relaterade artiklar