Подписка на параметры строки запроса в Angular

Я видел довольно много примеров подписки на параметры строки запроса в Angular 2+, но я не могу заставить ее работать.

например Как получить параметры запроса из URL-адреса в angular2?

Вот мой код:

import { ActivatedRoute, Router } from '@angular/router';
...
export class MyComponent implements OnInit,OnDestroy {
  private a: boolean = true;
  private b: boolean = true;

  constructor(route: ActivatedRoute)  {
  ...

  ngOnInit(): void {    
    this.route.queryParams.subscribe((queryParams:any) => {
      this.a = queryParams.a;
      this.b = queryParams.b;
     });

У меня проблема в том, что this, похоже, не относится к моему компоненту, а настройки a и b, которые я хочу использовать для управления операторами *ngIf, не работают.

Что я делаю не так?


typescript angular angular-router
person Remotec    schedule 08.08.2017    source источник
comment
вы должны определить тип queryParams : Params   -  person Bhavik Patel    schedule 08.08.2017
comment
this.route вероятно не определено. Попробуйте определить его как член экземпляра: constructor(private route: ActivatedRoute) - обратите внимание на добавленный модификатор private. Также рекомендуется использовать queryParamMap вместо queryParams   -  person Aleksey L.    schedule 08.08.2017

Ответы (5)


arrow_upward
8
arrow_downward

Код ниже предназначен для Angular 5.

import { ActivatedRoute, Router } from '@angular/router';
...
export class MyComponent implements OnInit, OnDestroy {
  private a: boolean;
  private b: boolean;

  constructor(private route: ActivatedRoute)  {
  this.a = true;
  this.b = true;
  ...
  }

  ngOnInit(): void {    
    this.route.queryParams.subscribe(queryParams => {
      this.a = queryParams['a'];
      this.b = queryParams['b'];
  });

Не могли бы вы попробовать и проверить, работает ли он?

person Vijayendra Mudigal    schedule 06.01.2018

arrow_upward
2
arrow_downward

Меня устраивает...

let comp = this;
ngOnInit(): void {
this.route.queryParams.subscribe(queryParams => {
  comp.a = queryParams['a'];
  comp.b = queryParams['b'];
});
person Alexandre Lindolfo Vianna    schedule 06.05.2019

arrow_upward
0
arrow_downward

Я думаю, ваша проблема в том, что ваши a и b являются ЧАСТНЫМИ.. вы должны сделать их ОБЩЕСТВЕННЫМИ для использования в вашем html, например:

import { ActivatedRoute, Router } from '@angular/router';
...
export class MyComponent implements OnInit,OnDestroy {
  public a: boolean = true; //<-- PUBLIC
  public b: boolean = true;

  constructor(route: ActivatedRoute)  {
  ...

  ngOnInit(): void {    
    this.route.queryParams.subscribe((queryParams:any) => {
      this.a = queryParams.a;
      this.b = queryParams.b;
     });
person federico scamuzzi    schedule 08.08.2017
comment
Спасибо за быстрый ответ. К сожалению, это не сработало. Не вижу, чего мне не хватает! - person Remotec; 08.08.2017
comment
Вы уверены, что ваш queryParams.a; является логическим? ..Можете ли вы проверить? (может быть, это «правда» .. так что строка .. потому что она пришла из URL-адреса ... может также опубликовать свой html с помощью ngIf? - person federico scamuzzi; 08.08.2017
comment
Скорректировал сравнение следующим образом: this.a= (queryParams.a === 'true'); до сих пор почему-то не работает. - person Remotec; 08.08.2017

arrow_upward
-2
arrow_downward

Вы теряете «это». Вы должны создать функцию и привязать ее к этому компоненту и поместить ее в обратный вызов подписки. Также вы можете сохранить это как const self = this

person Dmitry Sobolevsky    schedule 06.01.2018

arrow_upward

arrow_downward

person    schedule
comment
спасибо, @shaw за простой ответ - person Parth Developer; 30.11.2020