Angular 6 QueryParams OnInit 不可用？

Question

好的，我正在创建一个简单的页面，我希望用户通过 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

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

Answer 1

试试这个：

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

在我看来，最好的方法是使用订阅并这样做：

Answer 2

如果我尝试一下，这两种解决方案都可以工作：

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

    this.route.queryParams.subscribe(params =>
        console.log(params["client_id"])
    );
 }

Answer 3

试试这个……

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