Angular Dart 中的嵌套路由

Question

我有一个路由方案，其中#/articles 导致articles.html 视图，#/articles/featured 导致featured.html。不过，我不确定如何声明这种嵌套写作。如果我按如下方式配置我的路由，#/articles 和#/articles/featured 都会导致articles.html（因为两个路径都匹配 r'^articles'）。

library my_router;

import 'package:angular/angular.dart';

class MyRouteInitializer implements RouteInitializer {
  init(Router router, ViewFactory view) {
    router.root
      ..addRoute(
          name: 'articles',
          path: '/articles',
          enter: view('views/articles.html'),
          mount: (Route route) => route
            ..addRoute(
                name: 'featured',
                path: '/featured',
                enter: view('views/featured.html'))

      );
  }
}

如果我省略 enter: view('views/articles.html') 行，#/articles/featured 路由正确路由到 featured.html，但没有任何路由到 articles.html。

Answer 1

当您定义嵌套视图时，预计它们将由嵌套的ng-views 呈现，但这似乎并不是您真正想要的。您使用扁平结构的解决方法可能没问题。或者，您可以执行以下操作：

class MyRouteInitializer implements RouteInitializer {
  init(Router router, ViewFactory view) {
    router.root
      ..addRoute(
          name: 'articles',
          path: '/articles',
          mount: (Route route) => route
            ..addRoute(
                name: 'all',
                path: '/all',
                default: true,
                enter: view('views/articles.html')
            ..addRoute(
                name: 'featured',
                path: '/featured',
                enter: view('views/featured.html'))
      );
  }
}

Answer 2

我可以通过避免 mount 并定义从特定到一般的路线来实现此功能，但该解决方案似乎笨拙且容易出错。正确的方法是使用mount 并正确嵌套路由，但我无法让它工作。同时，这里有一个临时解决方案：

import 'package:angular/angular.dart';

class MyRouteInitializer implements RouteInitializer {
  init(Router router, ViewFactory view) {
    router.root
      ..addRoute(
          name: 'featured',
          path: '/articles/featured',
          enter: view('views/featured.html'))
      ..addRoute(
          name: 'articles',
          path: '/articles',
          enter: view('views/articles.html'));
  }
}