如何获取与 AngularDart 一起使用的路由? [英] How do I get routes to work with AngularDart?

问题描述

这是我的代码，

import 'package:angular/angular.dart';

class AppModule extends Module {

  AppModule(){
    type(AppController);
    type(LoginController);
    type(RouteInitializer, implementedBy: AppRouter);
  }

}

class AppRouter implements RouteInitializer {

  init(Router router, ViewFactory view) {
   router.root
    ..addRoute(
      name: 'login',
      path: '/login',
      enter: view('app/views/login.tpl.html'))
    ..addRoute(
       defaultRoute: true,
       name: 'index',
       enter: view('app/views/index.tpl.html'));
  }

}

@NgController(selector: '[app-ctrl]', publishAs: 'ctrl')
class AppController {

}

@NgController(selector: '[login-ctrl]', publishAs: 'ctrl')
class LoginController {

  Http _http;
  String works = 'Works.';

  LoginController(this._http);

}

没有可用的路由，单击#/login"链接不会更改 url 或视图.

No routes are working, clicking on a '#/login' link does not change the url or the view.

日志说

clicked /app/web/index.html#/login
route /app/web/index.html [Route: null]
route  [Route: index]

我做错了什么?

推荐答案

此代码可能存在一些问题.从我可以看到的最可能的问题是路由正在使用 pushState.当您使用 pushState 时，您不会使用哈希操作 url.有关更多信息，请参阅:操纵浏览器历史记录

There might be a couple of problems with this code. From what I can see the most likely problem is that the routing is using pushState. When you use pushState you don't manipulate the url using a hash. For more information on that see: Manipulating Browser History

Angular 将在浏览器支持时使用推送状态.

Angular will use push state when a browser supports it.

bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));

为您提供以下模块:

class AppModule extends Module {

  AppModule(){
    bind(AppController);
    bind(LoginController);
    bind(RouteInitializer, implementedBy: AppRouter);
    bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));
  }
}

其他可能的问题包括:

• 没有 ng-view 指令
• 未在 app/views/login.tpl.html 和 app/views/index.tpl.html 中设置 ng-bind-route

当我进行所有这些更改时，您的代码在导航到 #/login 时对我来说可以正常工作

When I made all these changes your code worked correctly for me when navigating to #/login

这篇关于如何获取与 AngularDart 一起使用的路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！