Угловая 2 маршрутизация без перезагрузки

Question

Я создаю одностраничное приложение, использующее Angular 2, которое сильно использует карты. Одним из требований является то, что при щелчке точки на карте URL-адрес обновляется, поэтому когда страница обновляется, карта масштабируется в эту точку (а также поддерживает глубокую привязку к точкам на карте).

Мне было интересно, что лучше всего достичь в Angular 2 будет? На высоком уровне, Router кажется очевидным выбором, но я не уверен, действительно ли он соответствует требованиям.

Для одной выбранной точки на карте необходимо будет обновить несколько различных компонентов на карте (например, на карте, выделить точку в отдельном компоненте списка и т. Д.). Таким образом, я не думаю, что router-outlet имеет смысл - все представления всегда видны одновременно - нет необходимости переключать представления на основе выбранного вида.

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

Любое руководство будет оценено по достоинству.

Answer 1

Похоже, вы можете использовать крюк CanReuse и OnReuse в своем компоненте карты, чтобы ваша карта не перезагружалась при изменении маршрута. Ваша карта может реагировать на изменение маршрута, но вы сможете поддерживать один и тот же экземпляр.

https://angular.io/docs/js/latest/api/router/CanReuse-interface.html https://angular.io/docs/js/latest/api/router-deprecated/index/OnReuse-interface.html

Создать компонент для карты и привязки, что в маршрут так, что он принимает координаты точки в качестве параметра маршрута:

class MapComponent() implements OnActivate, CanReuse, OnReuse { 

    coordinates: { 
     x: number, 
     y: number 
    } 

    constructor(private params: RouteParams) {} 

    routerOnActivate() { 
     this.coordinates = parseCoords(this.params.getParam('coords')); 
    } 

    routerCanReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) { 
     // return true if you can reuse this instance, otherwise reload 
    } 

    routerOnReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) { 
     // update your map component and child components as needed 
    } 

} 

@RouteConfig([ 
    { path: '<base-map-url>/:coords', component: MapComponent, name: 'MapCmp' 
]) 
class AppComponent() { ... } 

Обратите внимание, что это API обеспечивается устаревший маршрутизатор и еще не реализован в New New Router. Я не уверен, что такое план для RC-маршрутизатора, но я бы предположил, что вскоре они будут реализовывать подобные перехватчики.

В качестве альтернативы, вы можете быть в состоянии сделать то, что вы хотите использовать службу Расположение:

https://angular.io/docs/ts/latest/api/common/index/Location-class.html