angular - 在 Angular 中订阅查询字符串参数

Question

我在Angular 2+中看到了很多订阅查询字符串参数的例子，但我似乎无法让它工作

例如，如何从 angular2 中的 url 获取查询参数？

这是我的代码：

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语句的组件不起作用。

我究竟做错了什么？

Answer 1

以下代码适用于 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'];
  });

你能试试看它是否有效吗？

Answer 2

  ngOnInit() {
    // Example http://google.com?foo=bar#hash
    this.route.fragment.subscribe(frag => {
      // Result: 'hash'
      console.log('Fragment: ', frag);
    });
    this.route.queryParamMap.subscribe(queryParams => {
      /**
       * result: 'bar'
       */
      console.log('Data: ', queryParams);
    });
  }

Answer 3

这个对我有用...

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

Answer 4

我认为你的问题是你的 a 和 b 是私有的 .. 你必须让它们在你的 html 中成为 PUBLIC 顶部使用，例如：

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

Answer 5

你正在失去“这个”。您应该创建函数并将其绑定到该组件并将其放在订阅回调中。你也可以像这样保存你的 const self = this