首页 文章

如何使用AngularDart在表达式中获取路径参数?

提问于
浏览
3

我正试图直接从路由控制的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>

如您所见,我的视图只是一个带有一个自定义属性的自定义元素 . 我可以直接从路由参数填充该自定义属性吗?

1 回答

  • 2

    对于视图中的任何组件/指令/控制器,您可以要求注入具有 parameters 字段(Map)的 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'];
      }
    }
    

相关问题