Question

我正在使用Angular 2构建单页应用程序，这会大量使用地图。其中一个要求是，当在地图上单击某个点时，URL会更新，以便在刷新页面时，地图会缩放到该点（并且还支持深层链接到地图上的点）。

我想知道在Angular 2中实现这一目标的最佳方式是什么？在较高的层面上，路由器似乎是明显的选择，但我不确定它是否真的符合要求。

首先，地图上的选定点需要更新地图上的几个不同组件（例如地图上的点，突出显示单独列表组件中的点等）。因此，我认为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，尚未在新建新路由器中实现。我不确定RC路由器的计划是什么，但我猜他们不久就会实现类似的钩子。

或者，您可以使用位置服务完成您想要的任务：

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

Angular 2路由而不重新加载视图

1 个答案: