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

Question

这个问题与这个问题有关
Routing: get notified about parameter updates without reloading the view
我有一个带有网格 View 的 View (使用 ng-repeat 生成)。
路由参数recId指定最初将哪一行设为当前行。
该 View 具有导航按钮(向前向后)以选择当前记录。单击一行也会使该行成为当前行。
这种( View 内部)导航在 View 初始加载后不使用 AngularDarts 路由功能。
后退/前进按钮不反射(reflect) View 内的导航。
一旦我更改了 View 中的当前记录，浏览器 URL 就会不同步。
如果我每次用户使用导航操作时都更改浏览器 URL，则会重新加载 View 。
这使得开发更加复杂并导致 View 的丑陋重新加载(这是 WIP - 请参阅链接问题)。
保持应用程序状态和浏览器 URL(历史记录)同步的最佳/正确方法是什么。
更新
如何配置路由器，以便单击此生成的链接之一会更新浏览器中的 URL，但不会重新加载 View 。 (应该可以为当前选择的记录创建书签。)
代码有点过时，但自​​从我问这个问题后，我就没有在这个项目上工作。

路由器配置

library my_prototype.routing;

import 'package:angular/angular.dart';
import '../services/injectable.dart';

@InjectableService()
class AppRouteInitializer {


  call(Router router, ViewFactory views) {
    router.root
    ..addRoute(
        name: 'table',
        path: '/:entityId/table/:recId',
        enter: views('view/dynamic_table.html')
        )
    ..addRoute(
        name: 'default_view',
        defaultRoute: true,
        enter: (_) =>
            router.go('form',
                {
                  'entityId': '',
                  'rec': '-1'
                },
                replace: true));
  }
}

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

<ng-view></ng-view>

View 组件包含这个构造函数

@NgComponent(
  selector: 'dynamic-table',
  publishAs: 'ctrl',
  template: r'''  
    <div ng-repeat="rec in ctrl.records">
      <a href="/{{entityId}}/table/{{rec.id}}">{{rec.name}}</a>
    <div>''')
class DynamicTableComponent {
  HttpService _httpService;
  RouteProvider _routeProvider;
  String entityId;
  List<SomeRecord> records = [];

  DynamicTableComponent(this._routeProvider, this._httpService) {
    _log.fine('DynamicFormComponent');

    entityId = _routeProvider.parameters['entityId'];

    ... render table
  }
}

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

https://github.com/angular/angular.dart/pull/1254

https://github.com/angular/angular.dart/issues/1252

Answer 1

经过一些研究和测试，简短的回答是:您需要使用 history API
在history API中，可以找到函数pushState ，这对于在不重新加载页面的情况下更改 URL 位置很有用。
信息
就您而言，我创建了一个小项目来尝试重现您的问题:Carousel
在您的情况下，问题是将 angular dart 的路由器与浏览器的 url 同步，但是:
1. 我发现在 Angular 中没有办法做到这一点
在 angular 中，可以获取 Router 对象，但是:

.route(url)将重新加载页面

.url(url)将重新加载页面

.go(..)将重新加载页面

所以这是不可能的(根据我的研究，也许我错过了一些东西)有角度
2. location 不可能
位置也会重新加载页面
解决方案
所以我发现唯一能做你想做的事情就是 history API ， 像这样 :

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
  }
}

这允许我在我的类(class)中做这个事件的监听器:

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

有了这个，你可以在你的构造函数中正确设置你的状态、属性等......你知道如果你的构造函数被调用，它是一个页面加载或重新加载，在那个管理器之后你与历史记录和一些会监听一些事件的函数的同步.
关联

我github上的项目:Carousel

dart 文档中的历史对象:History Class

历史 API 文档:history API

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