Angular 6 QueryParams Не доступно OnInit?

Question

Хорошо, поэтому я создаю простую страницу, которую я хочу, чтобы пользователь передавал кучу параметров через URL. Самый базовый c пример, который я использовал, это http://localhost: 4200 /? Client_id = test

Я следую всем процедурам, которые я могу найти в inte rnet, но По какой-то причине параметры недоступны 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

и попробуйте это ...

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

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

попробуйте это:

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

, на мой взгляд, лучший подход - использовать подписку и делать это так: