Question

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

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-view呈现，但它看起来并不像您真正想要的那样。使用扁平结构的解决方法可能没问题。或者你可以这样做：

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'));
  }
}

Angular Dart中的嵌套路线

2 个答案: