如何使用 AngularDart 在表达式中获取路由参数？答案

【问题标题】：How to get route parameters in an expression using AngularDart?如何使用 AngularDart 在表达式中获取路由参数？
【发布时间】：2014-01-11 02:08:08
【问题描述】：

我正在尝试直接从由路由控制的 URL 转到属性值。最简单的方法是什么？

我的路线如下所示：

  ..addRoute(
      name: 'activities',
      path: '/activities',
      enter: view('views/activities.html'),
      mount: (Route route) => route
        ..addRoute(
            name: 'view',
            path: '/:activityId',
            enter: view('views/activity.html')));

我希望以下工作：

/activities /activities/f4f3j4093j4f

views/activity.html的内容：

<activity-photo activity-id="{{how to get this? I have it in the route}}"></activity-photo>

如您所见，我的视图只是具有一个自定义属性的自定义元素。我可以直接从路由参数中填充该自定义属性吗？

【问题讨论】：

我想我可以将 Route 参数直接注入到自定义元素的对象中。但是通过自定义属性传递路由参数感觉是正确的做法。

标签： dart angular-dart

【解决方案1】：

对于视图内的任何组件/指令/控制器，您可以要求注入具有parameters 字段（映射）的RouteProvider。

@NgComponent(
    selector: 'activity-photo',
    ...)
class ActivityPhotoComponent {
  ActivityPhotoComponent(RouteProvider routeProvider) {
    String activityId = routeProvider.parameters['activityId'];
    _loadActivity(activityId);
  }
}

这与您在示例中指定的方式略有不同。这里的用法是：

<activity-photo></activity-photo>

活动照片会自行查找活动 ID。

或者，您可以为视图创建一个控制器，但我想您需要用另一个标签包装您的模板...例如：

<div id="activity-view">
  <activity-photo activity-id="ctrl.activityId"></activity-photo>
</div>

@NgController(
    selector: '#activity-view',
    publishAs: 'ctrl')
class ActivityViewController {
  String activityId;

  ActivityViewController(RouteProvider routeProvider) {
    String activityId = routeProvider.parameters['activityId'];
  }
}

【讨论】：