Angular 角度5-从Url提取id

我是新来的。 因此，我试图从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'},
  ];

---

您只需将console.log移动到subscribe中即可查看值。正如您所发现的，尝试访问params.subscribe之外的值将不起作用。见下文

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

---

要对从params['id']值返回的内容执行任何其他操作，也需要在subscribe中执行。

只需将console.log移动到subscribe中即可查看该值。正如您所发现的，尝试访问params.subscribe之外的值将不起作用。见下文

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

要对params['id']值返回的内容执行任何其他操作，也需要在subscribe中执行。

我找到了解决方案

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

你可以直接做，而不是有一条儿童路线

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

我找到了解决办法

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

你可以直接做，而不是有一条儿童路线

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

---

您试图从哪个url提取ID？@hlfrmn eUsuario/ID您试图从哪个url提取ID？@hlfrmn eUsuario/idit返回了NaNCan的值我们查看了您的路由定义？谢谢。那么你用来测试这个的实际URL呢？看起来没有什么问题。您是否在控制台中看到任何错误消息？您也在使用+，是吗？是否可以在路由参数之外获取存储在this.id中的值？它返回了NaNCan的值。然后我们查看了您的路由定义？谢谢。那么你用来测试这个的实际URL呢？看起来没有什么问题。您是否在控制台中看到任何错误消息？您也在使用+，是吗？是否可以在路由参数之外获取存储在this.id中的值？