javascript - 在 URL 中获取/设置数据 --- Angular 2

Question

我做了这样的事情:

setURL(){
  this.router.navigate(['/app/chart', {height: this.chartHeight, width: this.chartWidth}]);
}

ngOnInit() {

    this.route.params.subscribe(
        (params: any) => {
            this.chartHeight= params['height'] || 0;
            this.chartWidth= params['width'] || 0;
        }
    );
}

这很好，因为如果未设置参数(不在 url 中)- 默认宽度和高度设置为 0。还好。但是，如果我更改此设置，或者在 url 中设置一些值并按 Enter 键，则不会发生任何变化。我的意思是，如果我 console.log 它 - 值设置正确，但 DOM 不受影响。根本没有任何变化。这很奇怪...

Answer 1

** 更新开始 **

我现在意识到您还希望该 url 存在，以便您可以允许人们直接访问具有该 URL 的位置。您还需要处理一个从 URL 中提取参数的函数。

我相信this answer会帮助你，但我还没有遇到这个问题。

** 更新结束 **

您尝试复制其功能的网站正在发出 get 请求。

在 Angular 2 中，如果你想将数据传递到 url，你可以这样做，

您将需要这些导入

import { Http, Response, Headers, URLSearchParams }from '@angular/http';
import { Observable }from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/take';

创建可观察对象，以便在页面中发生更改时更新数据，而无需刷新。

 private DimensionsData: Observable<any>;

每次有新的数据集要传递时，都会调用此函数。

    private SendData() {
        let params: URLSearchParams = new URLSearchParams();
        params.set('width', this.width);
        params.set('length', this.length);
        return this.http.get('UrlPathHere/',
            { search: params })
            .map((res: Response) => res.json())
        .take(1) //Takes the first observable and unsubscribes 
        .subscribe(res => this.DimensionsData = res.data_response)
    }

您将在 ngOnInit() 方法中调用该函数来开始工作，

ngOnInit() {
        this.SendData();
}

现在您可以获取 DimensionsData 并在代码中将其用作页面上的设置。每次有人更新页面时，GET 请求都会被调用，并且此变量也会更新。 维度数据。

您所要做的就是创建一个服务，从 URL 获取数据，然后将其作为响应传回。

我已经解释了如何使用 get 请求来执行此操作，因为这正是您向我展示的示例网站的执行方式。

您可以在此处的图片中看到，