Angular 5 - 从 Url 中提取 id

Question

我是 Angular 5 的新手。所以我试图从 url 中提取 id，这样我就可以将它发送到一个 php 文件，然后从数据库中取回一些数据。

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

我一直在尝试任何解决方案，但它不起作用(在控制台日志中它显示 NaN 或未定义)

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

Answer 1

您需要做的就是将 console.log 移到 subscribe 中以查看值。正如您所发现的，尝试访问 params.subscribe 之外的值将不起作用。见下文。

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

稍后在 ngOnDestroy 中，取消订阅以防止内存泄漏，例如:

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

您想要对从 params['id'] 值返回的内容执行的任何其他操作也需要在订阅中发生。