这个问题与这个问题有关 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
}
}
我今天收到了关于可能与此主题有关的拉取请求的通知
答案 0 :(得分:6)
经过一些研究和测试后,简短的回答是:您需要使用history API
在历史记录API中,您可以找到函数pushState
,它可以在不重新加载页面的情况下更改URL位置。
在您的情况下,我创建了一个小项目来尝试重现您的问题:Carousel
在您的情况下,问题是将角落飞行器的路由器与浏览器的URL同步,但是:
在angular中,可以获得Router对象,但是:
.route(url)
将重新加载页面.url(url)
将重新加载页面.go(..)
将重新加载页面所以不可能(通过我的研究,也许我已经错过了一些东西)有角度
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();
});
有了这个,你可以在你的构造函数中正确设置你的状态,属性等......你知道如果构造函数被调用它是一个页面加载或重新加载,并且在那个管理器之后你将与历史和一些函数同步听一些事件。
我不确定我是否正确回答了你的问题,如果没有警告我,我会删除这个答案