使用 angular2 中的参数从 url 检索数据

Question

在使用 routerLink 导航到另一个组件时，我很难从我的查询字符串中获取数据。在 angular.io 的文档之后完成，所以我不确定哪里出了问题。

组件 1：

此组件包含如下所示的 routerLink：

<div class="column small-12 large-8 gutter-xsmall-up end waiting">
     Could not find the movie, please go <a [routerLink]="['/request']" [queryParams]="{id:MovieFromImdb.Id, title: MovieFromImdb.Title}">request it</a>
</div>

这会产生这个 url:

http://localhost:3000/request?id=tt0117500&title=The%20Rock

组件 2：

在这个组件中，我需要检索数据，但不知何故它只在使用 console.log 时保持未定义状态。

这是我试过的。

import { Component } from '@angular/core';
import { AppState } from '../app.service';
import { Params, ActivatedRoute } from '@angular/router';

export class Request {

    private typeArray: Array<any>;
    private defaultSelection: number;
    private Title: string;
    private Link: string;

    constructor(public requestService: RequestService, private route:  ActivatedRoute,) {
        this.defaultSelection = 2;
        this.typeArray = requestService.createList();
    }

    requestMovie(title, link, quality) {
         console.log(title, link, quality);


    }

    ngOnInit() {

        this.route.params.forEach((params: Params) => {
            this.Title = params['title'];
            this.Link = params['id'];

        });

        console.log(this.route.snapshot.params['id'])
        console.log(this.route.snapshot.params['title'])

     }

}

任何人都可以看到我在这里做错了什么吗？

使用最新的 angular2 版本。

Answer 1

这很简单，你应该使用 queryParams 而不是 params。

ngOnInit() {

    this.route.queryParams.forEach((params: Params) => {
        this.Title = params['title'];
        this.Link = params['id'];

    });

    console.log(this.route.snapshot.queryParams['id'])
    console.log(this.route.snapshot.queryParams['title'])

 }

https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html#!#queryParams-anchor

Answer 2

您可以像这样使用订阅路由参数：-

ngOnInit() {
      this.route.params.subscribe(params => {
           for(let param in params ) {
                console.log(param, "the param");
           }
      });
}

使用 angular2 中的参数从 url 检索数据

Retrieve data from url wiith params in angular2

params

angular2-routing

angular