我在系统中有一个用户实体,以下路由从服务器获取它并显示其详细信息:
routerConfiguration.map([
// ...
{route: 'user/:id', name: 'user-details', moduleId: './user-details'}
]);
现在我想为所显示的用户显示一个编辑表单。我有以下要求:
- 编辑表单应该有一个单独的 URL 地址,以便可以轻松地将其发送给其他人。
- 当用户点击用户详细信息页面上的编辑按钮时,编辑表单应使用已加载的用户实例(即,不应再次联系 API 以获取用户详细信息)。<
- 当用户点击用户详细信息页面上的编辑按钮,然后点击浏览器中的返回按钮时,他应该再次看到没有编辑表单的详细信息页面。<
第一次尝试
我尝试将编辑表单定义为单独的页面:
routerConfiguration.map([
// ...
{route: 'user/:id/edit', name: 'user-edit', moduleId: './user-edit'}
]);
这通过了 #1 和 #3 要求,但在打开编辑表单时必须再次加载用户。
我不知道有什么方法可以在路线之间走私一些自定义数据。如果我可以将预加载的用户实例传递到编辑路由,并且编辑组件将使用它,或者在未给出的情况下加载一个新实例(例如,用户直接访问 URL),那就完美了。我只找到how to pass strings to the routes in a slighlty hacky way .
第二次尝试
我决定在模态中显示编辑表单,并在存在 ?action=edit
GET 参数时自动显示。代码灵感来自this和 this问题:
export class UserDetails {
// constructor
activate(params, routeConfig) {
this.user = /* fetch user */;
this.editModalVisible = params.action == 'edit';
}
}
当用户单击编辑按钮时,将执行以下代码:
displayEditForm() {
this.router.navigateToRoute('user/details', {id: this.user.id, action: 'edit'});
this.editModalVisible = true;
}
这会传递 #1(编辑 url 为 user/123?action=edit
)和 #2(用户实例仅加载一次)。但是,当用户单击 Back 浏览器按钮时,URL 根据需要从 user/123?action=edit
更改为 user/123
但我不知道如何检测它并隐藏编辑表单(不会再次调用 activate
方法)。因此,该解决方案不符合 #3 要求。
编辑:
事实上,我发现我可以检测 URL 更改并使用事件聚合器隐藏编辑表单:
ea.subscribe("router:navigation:success",
(event) => this.editModalVisible = event.instruction.queryParams.action == 'edit');
但是,我仍然想知道是否有更好的方法来实现这一目标。
问题是
如何以干净直观的方式应对这种情况?
最佳答案
添加一个 User 类作为模型并使用依赖注入(inject)在 View 模型中使用它怎么样?
export class User {
currentUserId = 0;
userData = null;
retrieve(userId) {
if (userId !== this.currentUserId) {
retrieve the user data from the server;
place it into this.userData;
}
return this.userData;
}
}
关于aurelia - 如何在 Aurelia 的路线之间重用数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41697153/