Привязать параметры строки запроса к модели в Angular 2

Question

У меня есть приложение, подобное Google Maps. Я хотел бы синхронизировать мою модель с параметрами строки запроса.

Что я имею в виду?

Предположим, у вас есть простой объект карты. Вы вводите сайт, и вы получаете границы по умолчанию, установленные в компоненте карты. Но когда вы что-то меняете (панорамирование/масштабирование/и т. Д.), Я хочу, чтобы ваши изменения также были установлены в строке запроса для совместного использования мест.

Как это сделать правильно?

Answer 1

Я покажу вам, как я его реализовал, но я не уверен, что это правильный способ сделать это.

Идея такова:

Во-первых, добавить скрытый вход для записи изменения объекта карты одновременно:

<input hidden id='hiddenMapValue' #hiddenInput>

#hiddenInput есть для цели, и вы увидите его.

Затем, каждый раз, когда изменяется отображение объекта, присвоить значение для этого скрытого ввода, например:

$("#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.

И нет, угловая модель 2 не записывает изменения, сделанные jQuery. Это альтернативное решение этой проблемы.

Надеюсь, это поможет.

Answer 2

Вводят в конструкторе:

activatedRoute: ActivatedRoute, 
router: Router 

Чтобы обновить URL, вы можете использовать:

this.router.navigate(
    [this.param], 
    { 
    queryParams: { 
     queryParamKey: this.queryParam, 
    } 
    }); 

Чтобы подписаться на изменения в URL изменения вы можете использовать:

this.activatedRoute.paramMap.subscribe((params: ParamMap) => { 
    // remember to add /:paramKey to your routing! 
    this.param = params.get('paramKey'); 
    this.update(); 
}); 

this.activatedRoute.queryParams.subscribe((params: { [key: string]: any }) => { 
    this.queryParam = params['queryParamKey']; 
}); 

Таким образом, вы сможете убедиться, что все указано в URL-адресе, поскольку все ваши изменения нажимаются и вытащил его.