在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中)，默认的宽度和高度设置为< code>0。没关系。但是如果我改变这个或者我在url中设置一些值，然后按enter键，什么都不会改变。我的意思是，如果我< code>console.log it -值设置正确，但是DOM不受影响。一点变化都没有。这太奇怪了...

Answer 1

**更新开始**

我意识到现在你也希望url存在，这样你就可以允许人们通过URL直接访问这个位置。您还需要处理一个从URL中提取参数的函数。

我相信这个答案会对你有所帮助，但我还没有面对这个问题。

** 更新结束 **

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

在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';

创建observable，以便在页面中发生变化时更新数据，而无需刷新数据。

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

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

我已经解释了如何通过get请求实现这一点，因为这正是您向我展示的示例网站的实现方式。

你可以在这张照片中看到，