调试Angular Dart路由

时间:2015-02-22 19:00:11

标签: dart url-routing angular-dart

我使用Angular Dart的前几天一直很愉快......

...除了路由,这继续给我带来问题。我想要的是:

  • /product向我显示产品清单
  • /是/ product的别名(即/ product是默认视图)
  • /product/:id查看/编辑单个商品

我确切地告诉你问题是什么,除了似乎总是在改变。有时我的观点根本没有加载;现在,我只获得了产品清单,即使是/product/1128。我按照教程中的说明启用了日志记录,/product/1128的控制台输出是:

listen ignoreClick=false
route path=/product/1128 startingFrom=null forceReload=false
listen on win
newHandle for [Route: null]

对于初学者来说,了解这些控制台消息的含义会很有帮助。他们对像我这样的新手并不是很有帮助。

非常感谢您的帮助!

供您参考,这是我的代码(为了您的观看乐趣而连接的各种文件):

void main() {
  Logger.root.level = Level.ALL;
  Logger.root.onRecord.listen((LogRecord r) { print(r.message); });

  print('main');  // my own quick-n-dirty debugging
  applicationFactory()
  .addModule(new ProductModule())
  .run();
}

class ProductModule extends Module {
  ProductModule() {
    print('ProductModule');  // more debugging
    bind(RouteInitializerFn, toValue: routeInitializer);
    bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));
    bind(ProductList);
    bind(ProductEdit);
  } 
}

void routeInitializer(Router router, RouteViewFactory views) {
  print('routeInitializer');
  views.configure({
    'index': ngRoute(
      path: '',
      view: 'view/product/list.html',
      mount: {
        'product': ngRoute(
          path: '/product',
          view: 'view/product/list.html',
      mount: {
        'product_edit': ngRoute(
          path: '/:id',
          view: 'view/product/edit.html'),
        }),
    })
  });
}

1 个答案:

答案 0 :(得分:0)

我对路由做了很多工作,但也许有些提示可能对你有帮助。

应该有defaultRoute: true选项 不要添加''路由,将productproduct_edit设置为product设置default:true选项的顶级路由。

void routeInitializer(Router router, RouteViewFactory views) {
  print('routeInitializer');
  views.configure({
    'product': ngRoute(
      path: '/product',
      defaultRoute: true,
      view: 'view/product/list.html'),
      mount: {
        'product_edit': ngRoute(
          path: '/:id',
          view: 'view/product/edit.html'),
      }
  });
}

未经测试......