在Polymer中通过app-router传递选中网格行ID的技术咨询

我来帮你把缺失的关键环节补全，分两步就能搞定这个需求：

1. 在my-data.html中传递选中的网格ID #

首先得在网格组件上监听选中事件，拿到选中行的ID，再通过app-router跳转时把这个ID作为路由参数带过去。假设你用的是<vaadin-grid>（其他网格组件逻辑类似）：

<!-- my-data.html -->
<vaadin-grid id="dataGrid" items="[[items]]" selected-items-changed="handleSelection">
  <!-- 这里放你的网格列定义 -->
</vaadin-grid>

<app-location route="{{route}}"></app-location>
<app-router role="navigation">
  <!-- 配置带参数的路由，指向my-assessment页面 -->
  <app-route path="/assessment/:assessmentId" component="my-assessment"></app-route>
</app-router>

接着在脚本里处理选中事件并完成跳转：

// my-data.html的脚本部分
handleSelection(e) {
  // 假设是单选场景，取第一个选中项
  const selectedItem = e.detail.value[0];
  if (selectedItem) {
    const assessmentId = selectedItem.id; // 替换成你数据里实际的ID字段名
    // 跳转到my-assessment页面并携带ID参数
    this.route.path = `/assessment/${assessmentId}`;
  }
}

2. 在my-assessment.html中接收参数并更新Iron-Ajax的URL #

接下来要在目标页面接收路由参数，然后动态修改iron-ajax的请求URL：

<!-- my-assessment.html -->
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/assessment/:assessmentId" data="{{routeData}}"></app-route>

<iron-ajax id="questionsAjax" url="{{ajaxUrl}}" handle-as="json" on-response="handleResponse"></iron-ajax>

对应的脚本部分实现参数监听和URL更新：

// my-assessment.html的脚本部分
static get properties() {
  return {
    routeData: Object,
    ajaxUrl: String
  };
}

// 通过属性观察者监听assessmentId变化
static get observers() {
  return [
    '_updateAjaxRequest(routeData.assessmentId)'
  ];
}

_updateAjaxRequest(assessmentId) {
  if (assessmentId) {
    // 替换URL里的assessmentId参数
    this.ajaxUrl = `http://192.168.178.31:8080/demo/questions?assessmentId=${assessmentId}`;
    // 手动触发新的请求
    this.$.questionsAjax.generateRequest();
  }
}

关键注意事项 #

• 路由配置里的:assessmentId是参数占位符，必须和你传递的参数名对应上；
• 如果是多选网格，需要调整handleSelection里获取ID的逻辑（比如遍历所有选中项）；
• 当ajaxUrl更新后，一定要调用generateRequest()，否则iron-ajax不会自动发起新请求；
• 确保routeData属性被正确绑定，路由变化时能实时拿到最新的参数值。

内容的提问来源于stack exchange，提问作者user3310115