首页 文章

订阅Angular中的查询字符串参数

提问于
浏览 次
5

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

例如How get query params from url in 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 语句不起作用 .

我究竟做错了什么？

angular typescript angular-router

4 回答

  • 3

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

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

    回复于
  • 1
    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);
    });
  }
    回复于
  • 0

    我认为你的问题是你的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;
     });
    回复于
  • -1

    你输了'this' . 您应该创建函数并将其绑定到此组件并将其放在订阅回调上 . 你也可以保存这个 const self = this

    回复于

相关问题