Dart 保持浏览器URL与应用程序状态同步

此问题与此问题相关

我有一个带有网格视图的视图（使用

ng repeat

生成）。
路由参数

recId

指定最初将哪一行设为当前行

视图有导航按钮（向前向后）来选择当前记录。单击一行也会使该行成为当前行

这种（视图内部）导航在初始加载视图后不会使用角镖路由功能。
后退/前进按钮不反映视图内的导航。
只要我更改视图中的当前记录，浏览器URL就会不同步

如果每次用户使用导航操作时都更改浏览器URL，则会重新加载视图。 这使得开发更加复杂，并导致视图的重新加载（即WIP-请参阅链接问题）

保持应用程序状态和浏览器URL（历史记录）同步的最佳/正确方法是什么

更新 如何配置路由器，以便单击其中一个生成的链接可以更新浏览器中的URL，但不会重新加载视图。（应该可以为当前选定的记录创建书签。）

代码有点过时，但我没有在这个项目上工作，因为我问了这个问题

路由器配置

library my_prototype.routing；
导入“包：角度/角度.dart”；
导入“../services/injectable.dart”；
@可注入服务（）
类认可初始化器{
呼叫（路由器、视图、工厂视图）{
根路由器
…addRoute(
名称：'表'，
路径：'/:entityId/table/:recId'，
输入：视图（'view/dynamic_table.html'）
)
…addRoute(
名称：“默认视图”，
defaultRoute:对，
输入：（)）=>
router.go（'form'，
{
“entityId”：“，
'记录'：'-1'
},
替换：true）；
}
}

index.html仅包含Dart/AngularDart样板文件

视图组件包含此构造函数

@NgComponent(
选择器：“动态表”，
出版物：“ctrl”，
模板：r''
''')
类DynamicTableComponent{
HttpService HttpService；
路由提供者(RouteProvider);；
字符串entityId；
列出记录=[]；
DynamicTableComponent（此.\u routeProvider，此.\u httpService）{
_log.fine（'DynamicFormComponent'）；
entityId=_routeProvider.parameters['entityId']；
…渲染表
}
}

我今天收到了一个关于拉取请求的通知，该请求可能与此主题有关

---

经过一些研究和测试，简短的回答是：您需要使用

在历史API中，您可以找到函数

pushState

，该函数可用于更改URL位置，而无需重新加载页面

问询处 在您的情况下，我创建了一个小项目，试图重现您的问题：

在您的情况下，问题是将angular dart路由器与浏览器的url同步，但是：

1.我找不到任何方法来做这件事 在angular中，可以获取路由器对象，但是：

• .route（url）

  将重新加载页面

• .url（url）

  将重新加载页面

• .go（..）

  将重新加载页面

所以这是不可能的（我的研究，也许我错过了一些东西）与角度

2.在

位置

位置也将重新加载页面

解决方案 所以我发现唯一能做你想做的事情就是，像这样：

import 'dart:html'

void main() {
   window.history.pushState(null, "title", "your/new/url");
}

但有一个小问题是，当您更改状态时不会触发任何事件，因此为了修复此行为，我创建了一个类的小包装器，以便在调用

pushState（）

函数时发送事件

class CustomHistory {

  // Some code

  void pushState(Object data, String title, [String url]) {
    window.history.pushState(data, title, url);
    this._onPushStateEvent.add(new StateEvent(data, title, url)); // i have create a StateEvent object myself
  }
}

这允许我在类中执行此事件的侦听器：

 history.onPushStateEvent.listen((e) {
      var l = e.url.split("/");
      this.section = l[2];
      this.id = int.parse(l[3]);
      this.text = getText();
    });

有了它，您可以在构造函数中正确设置您的状态、属性等。。。您知道，如果调用了构造函数，这将是一个页面加载或重新加载，然后管理器将与历史记录和一些将侦听某个事件的函数进行同步

链接

• 我的github上的项目：
• dart文档中的历史对象：
• 历史API文档：

注:

---

我不确定我是否正确回答了您的问题，如果回答不正确，请警告我，我将删除此答案

您有什么例子要展示吗？可能是一些代码？你需要一个像“”或“”这样的url，这样可以吗？我添加了一些代码。我从一个我不久前参与的项目中获取了代码，并将其缩减了很多。如果你认为与这个问题相关的东西缺失了，不要犹豫问。问当然可以。当选择其他记录时，浏览器URL应反映当前应用程序状态（rec.id），并且当浏览器URL rec值更改时，不应重新加载视图。我想其他一切都应该很容易处理。我只需要组件中的当前rec值。URL看起来像

http:mydomain.com/index.html#/employee/table/15

，其中

employee

是实体名称（更改此值可能会导致重新加载视图），

15

是recId。recId更改不应导致视图重新加载。我稍微更改了问题中的代码。它不必是链接元素，按钮也可以。非常感谢您的努力。我已停止服务好几天了。在接下来的几天里，我会详细了解您提出的解决方案，然后给出一些反馈。