Question

我有任务 - 通过URL在Angular 2应用程序的App组件中传输一些参数。

我找到的最佳方式 - 使用queryParams。但我找不到解析这些参数的最佳方法。

我确信使用ActivatedRoute将解决我的任务（我知道如何导入它以及如何在构造函数中使用），但我不确定如何使用它来提取queryParams。

你可以帮助我吗？

不幸的是我无法在plunker中运行我的代码（在Angular 2上找不到正确的示例），按原样附加它。

import {Component} from '@angular/core';
import { ActivatedRoute, NavigationExtras } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  selector: 'my-app',
  styles: [],
  template: 
  `
  <button (click)="testLink()">Make link</button>
  <button (click)="checkEntity()">Check Params</button>
  `
})
export class App {
  entity: any;

  constructor(
    private route: ActivatedRoute) {
  }

  ngOnInit() {

  }

  checkEntity(){
    this.entity = this.route
      .queryParams
      .map(params => params['entity'] || 'None');

    if(this.entity) alert('It works!');
  }

  testLink(){
    let navigationExtras: NavigationExtras = {
      queryParams: { 'entity': 'user' }
    };

    this.router.navigate(['/'], navigationExtras);
  }
}

最后一步 - 在entity中获取queryParams。此代码使用Observable，但对我来说，只需一次检查。

Answer 1

我正在像这样在ionic 4应用程序中传递参数。代码中缺少的全部是：

检索时订阅可观察对象
传递时对查询参数进行字符串化

    export class App {
      entity: any;
      constructor(private route: ActivatedRoute) { }

      checkEntity() {
        this.route.queryParams.subscribe(params => { 
          if (params) {
            if (params.entity) {
              alert('It works!'); 
            } 
          } 
        })
      }

      testLink() {
        let navigationExtras: NavigationExtras = { 
          queryParams: { 
            entity: JSON.stringify('user') 
          } 
        };
        this.router.navigate(['/'], navigationExtras);
      }
    }

Angular 2.如何在组件中获取queryParams？

1 个答案: