0

好的，所以我正在创建一个简单的页面，我希望用户通过 URL 传递一堆参数。我一直在使用的非常基本的例子是http://localhost:4200/?client_id=test

我正在遵循我可以在互联网上找到的所有程序，但由于某种原因，参数在 OnInit 上不可用，并且只能通过订阅获得？

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'Login';
  submitted: boolean = false;

  constructor(
    private route: ActivatedRoute){
  }

  ngOnInit(){
    console.log(this.route.snapshot.queryParams); //line 26
    this.route.queryParamMap.subscribe(params => {
      console.log(this.route.snapshot.queryParams); //line 28
    })
  }
}

这是打印的

{} - line 26
{} - line 28
{client_id: "test"} - line 28

好像Angular直到页面加载后才识别查询字符串参数？我怎样才能解决这个问题？

编辑：

我也尝试过使用 params.get() - 结果相同

this.route.queryParamMap.subscribe(params => {
  console.log(params.get('client_id'));
})

印刷

null
test

所以订阅的第一次激活值为空 - 然后值更改为测试并更新。我试图避免第一个“空”值。

4

3 回答 3

0

try this :

this.route.params.subscribe((params:Params) => {
    ... use params['key'] to access its value
});

in my opinion, the best approach is to use subscription and do like this :

enter image description here

于 2020-02-25T21:25:35.380 回答
0

如果我尝试，这两种解决方案都有效：

 ngOnInit(){
    this.route.queryParamMap.subscribe(params =>
        console.log(params.get("client_id"))
     );

    this.route.queryParams.subscribe(params =>
        console.log(params["client_id"])
    );
 }
于 2020-02-25T22:10:16.743 回答
0

试试这个...

@Component(/* ... */)
export class UserComponent implements OnInit {
    id$: Observable<string>;
    id: string;

    constructor(private route: ActivateRoute) {}

    ngOnInit() {
        this.id$ = this.route.paramMap.pipe(map(paramMap => paramMap.get('id')));

        // or for sync ( one time ) retrieval of id

        this.id = this.route.snapshot.paramMap.get('id');
    }
}
于 2020-02-25T21:46:32.710 回答