我做了这样的事情:
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 不受影响。根本没有任何变化。这很奇怪...
最佳答案
** 更新开始 **
我现在意识到您还希望该 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 请求来执行此操作,因为这正是您向我展示的示例网站的执行方式。
您可以在此处的图片中看到,
关于javascript - 在 URL 中获取/设置数据 --- Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42838344/