如何使用AngularDart在表達式中獲取路由參數？

Question

我試圖直接從路由控制的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'))); 

我希望以下工作：的views/activity.html

/activities /activities/f4f3j4093j4f

內容：

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

正如你所看到的，我的視圖只是一個具有一個自定義屬性的自定義元素。我可以直接從路由參數填充自定義屬性嗎？

Answer 1

對於視圖內的任何組件/指令/控制器，您可以要求注入RouteProvider其中有parameters字段（Map）。

@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']; 
    } 
}