Question

我想从路由参数获取ID，但它会返回null作为值。

app.component.ts：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {    
  constructor(private route: ActivatedRoute) { }

    ngOnInit(){  
    const id = this.route.snapshot.paramMap.get('idC');
    console.log(id);
}

routing.ts：

{ path: 'profile/:idC', component: AccountComponent }

在app.component上编写代码的目的是因为我在app上使用了导航栏，因此当用户连接时，预期结果是从路由获取ID，以便导航栏将显示“ Welcome user1”。有什么办法吗？

Answer 1

您也可以在没有服务

的情况下获得 params 值

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

ngOnInit() {

 this.router.events.subscribe((event: any) => {
    let r = this.route;
    while (r.firstChild) {
        r = r.firstChild
    }
    r.params.subscribe(params => {
        console.log(params.idC);
    });
  });

}

Answer 2

您可以从idC中选择AccountComponent，然后将值分配给服务内部的属性。

account.component.ts

constructor(private route: ActivatedRoute, myService: MyService) { }

ngOnInit(){  
  const id = this.route.snapshot.paramMap.get('idC');
  this.myService.id = id;
  console.log(id);
}

从AppComponent访问相同的服务，并在HTML中使用该变量。

例如，在您的 app.component.ts

中

constructor(private route: ActivatedRoute, myService: MyService) { }

和您的 app.component.html

<p>ID: {{myService.id}}</p>

Angular 5 ParamMap无法在app.component.ts上运行

2 个答案: