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

Question

这个问题与这个问题有关 Routing: get notified about parameter updates without reloading the view

我有一个带有网格视图的视图（使用ng-repeat生成） 路由参数recId指定哪个行最初是当前的。

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

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

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

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

更新

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

代码有点过时了，但自从我提出这个问题以来，我没有参与这个项目。

路由器配置

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>

视图组件包含此构造函数

@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

在历史记录API中，您可以找到函数pushState，它可以在不重新加载页面的情况下更改URL位置。

信息

在您的情况下，我创建了一个小项目来尝试重现您的问题：Carousel

在您的情况下，问题是将角落飞行器的路由器与浏览器的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
  }
}

这允许我在班上做一个听众：

 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 doc中的历史记录对象：History Class
• 历史API文档：history API

注意：

我不确定我是否正确回答了你的问题，如果没有警告我，我会删除这个答案