Angular Dart中的嵌套路线

Sha*_*uli 4 dart angular-dart

我有一个路由方案,#/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'))

      );
  }
}
Run Code Online (Sandbox Code Playgroud)

如果省略该enter: view('views/articles.html')行,则#/articles/featured路由正确路由到featured.html,但是没有路由到articles.html.

pav*_*lgj 6

当您定义嵌套视图时,它们应该由嵌套视图呈现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'))
      );
  }
}
Run Code Online (Sandbox Code Playgroud)