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

Question

此问题与此问题有关
路由:在不重新加载视图的情况下获得有关参数更新的通知

我有一个带有网格视图的视图(使用生成ng-repeat).
routing参数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

经过一些研究和测试,简短的回答是:您需要使用历史API

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

信息

在您的情况下,我创建了一个小项目来尝试重现您的问题:轮播

在您的情况下,问题是将角度飞镖的路由器与浏览器的URL同步,但是:

我在Angular找不到办法

在angular中,可以获得Router对象,但是:

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

所以这是不可能的(我的研究,也许我错过了一些东西)与角度

2.这是不可能的 location

位置也将重新加载页面

解

所以我发现你做的只是历史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文档:历史API

注意 :

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