绑定查询字符串参数以在Angular 2中建模 [英] Bind query string params to model in Angular 2

问题描述

我有一个与Google Maps类似的应用.我想将我的模型与查询字符串参数同步.

I have an app similar to Google Maps. I would like to sync my model with query string params.

这是什么意思?

假设您有一个简单的地图对象.您进入站点，并在地图组件中获得默认边界设置.但是，当您更改某些内容时(平移/缩放/等)，我希望您的更改也可以在查询字符串中进行设置，以便进行位置共享.

Suppose you have a simple map object. You enter the site and you get default bounds set in the map component. But when you change something (pan/zoom/etc.), I want your changes to be set also in query string for location sharing things.

如何正确执行此操作?

推荐答案

我将向您展示实现它的方式，但是我不确定这是否是正确的实现方式.

I will show you the way I implemented it but I'm not sure if it's a proper way to do it though.

这个想法是:

首先，我添加了一个隐藏的输入以同时记录地图对象的变化:

First, I add a hidden input to record the change of map object simultaneously:

<input hidden id='hiddenMapValue' #hiddenInput>

#hiddenInput是有目的的，您将看到它.

#hiddenInput is there for a purpose and you'll see it.

然后，每次映射对象更改时，都将值分配给此隐藏的输入，例如:

Then, every time map object changes, assign the value to this hidden input, for example:

$("#hiddenMapValue").val(place.geometry.location).trigger('change');

在您的组件中:

@ViewChild('hiddenInput') hiddenInput: ElementRef;
ngAfterViewInit(){
 $(this.hiddenInput.nativeElement).on('change',  (e)=>{
  this.onInputChanged(e);
 });
}

private onInputChanged(e): void{
 //This is your changed location value
 console.log(e.target.value);
}

@ViewChild('hiddenInput') hiddenInput: ElementRef;是保持隐藏输入#hiddenInput的方式.

@ViewChild('hiddenInput') hiddenInput: ElementRef; is how you get a hold on hidden input #hiddenInput.

不，角度2模型不会记录jQuery所做的更改.到目前为止，这是解决此问题的另一种方法.

And no, angular 2 model does not record changes made by jQuery. This is an alternate solution to this problem, so far.

我希望这会有所帮助.

这篇关于绑定查询字符串参数以在Angular 2中建模的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！