首页 文章

Angular 2路由无需重新加载视图

提问于
浏览 次
1

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

我想知道在Angular 2中最好的目标是什么？在高层次上，路由器似乎是明显的选择，但我不确定它是否真的符合要求 .

例如， Map 上的选定点将需要更新 Map 上的几个不同组件（例如， Map 上的点，突出显示单独列表组件中的点等） . 因此，我认为 router-outlet 没有多大意义 - 所有视图总是同时可见 - 不需要根据所选视图切换视图 .

在使用应用程序时，我也不确定是否要根据URL更改触发任何操作 . 即如果你点击 Map 上的某个点，一切都已经按预期更新 - 我想要更新URL的唯一原因是在重新加载时仍然选择该点 .

任何指导将不胜感激 .

angularjs angular

1 回答

  • 3

    听起来您可以在 Map 组件中使用CanReuse和OnReuse挂钩来防止 Map 在路线更改时重新加载 . 您的 Map 可以响应路线的变化，但您可以维护相同的实例 .

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

    为 Map 创建一个组件并将其绑定到您的路线，以便将点坐标作为路径参数：

    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

    回复于

相关问题