调试 Angular Dart 路由

Question

我使用 Angular Dart 的头几天很愉快...

...除了路由，它继续给我带来问题。我想要的是：

/product 向我展示产品列表
/ 成为 /product 的别名（即 /product 是默认视图）
/product/:id到view/edit单品

我会准确地告诉你问题出在哪里，只是它似乎总是在变化。有时我的视图根本不加载；现在，即使在 /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'),
        }),
    })
  });
}

Answer 1

我在路由方面做得不多，但也许有些提示可能会对您有所帮助。

应该有一个 defaultRoute: true 选项。
根本不要添加 '' 路由，使 product 和 product_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'),
      }
  });
}

未测试...

调试 Angular Dart 路由

Debug Angular Dart routing

dart

url-routing

angular-dart