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

时间:2014-02-17 07:38:51

标签: dart angular-dart

这个问题与这个问题有关 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
  }
}

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

1 个答案:

答案 0 :(得分:6)

经过一些研究和测试后,简短的回答是:您需要使用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();
    });

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

链接

注意:

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