如何通过NavigationMixIn.Navigate从LWC向Omnistudio FlexCard传数据

你遇到的问题核心原因有两个：

• 使用NavigationMixin.Navigate跳转时，直接传递复杂对象会因序列化规则丢失数据；
• pubsub在跳转前触发时，目标FlexCard还未完成初始化，无法订阅到事件。

下面给你几个可行的解决方案：

方案1：通过Navigation的state传递关键字段（最稳妥） #

Omnistudio的vlocityLWCOmniWrapper支持通过state参数传递简单类型的输入参数，你可以把行数据里的关键标识（比如locationId、recordId）传过去，再在FlexCard里根据标识查询完整数据。

修改你的跳转代码：

handleRowAction(event) {
  const actionName = event.detail.action.name;
  const row = event.detail.row;

  switch (actionName) {
    case 'locationId':
      this[NavigationMixin.Navigate]({
        type: 'standard__component',
        attributes: {
          componentName: 'omnistudio__vlocityLWCOmniWrapper'
        },
        state: {
          c__target: 'c:cfCNCFacilityLocationsDetailsPage',
          c__tabLabel: row.locationId,
          // 新增需要传递的关键字段
          c__locationId: row.locationId,
          c__recordId: row.Id // 若有主记录ID也可传递
        }
      });
      break;
    default:
  }
}

然后在FlexCard中配置接收参数：

1. 打开cfCNCFacilityLocationsDetailsPage FlexCard
2. 进入Input Parameters标签页，添加locationId（类型选String）
3. 在FlexCard的数据源（比如Salesforce Object数据源）中，将过滤条件设为LocationId = {locationId}（使用你配置的参数名）
4. 保存并激活FlexCard，跳转后即可自动加载对应行的数据

方案2：用临时存储中转数据（适合传递复杂对象） #

如果必须传递完整行对象，可以用sessionStorage临时存储数据，跳转后在FlexCard中读取：

LWC跳转代码修改： #

handleRowAction(event) {
  const actionName = event.detail.action.name;
  const row = event.detail.row;

  switch (actionName) {
    case 'locationId':
      // 将行数据转为JSON存入sessionStorage
      sessionStorage.setItem('CNCFacilityRowData', JSON.stringify(row));
      this[NavigationMixin.Navigate]({
        type: 'standard__component',
        attributes: {
          componentName: 'omnistudio__vlocityLWCOmniWrapper'
        },
        state: {
          c__target: 'c:cfCNCFacilityLocationsDetailsPage',
          c__tabLabel: row.locationId
        }
      });
      break;
    default:
  }
}

FlexCard里读取数据： #

在FlexCard的JavaScript标签页（若允许自定义JS）添加初始化逻辑：

connectedCallback() {
  const rowData = JSON.parse(sessionStorage.getItem('CNCFacilityRowData'));
  if (rowData) {
    // 将数据赋值给FlexCard变量或直接使用
    this.set('rowData', rowData);
    // 用完删除避免残留
    sessionStorage.removeItem('CNCFacilityRowData');
  }
}

方案3：修正pubsub的使用方式（不推荐，稳定性差） #

如果坚持用pubsub，需确保目标组件先订阅再触发事件，可通过延迟触发实现，但这种方式依赖加载时机，不稳定：

// 仅作参考，不推荐生产环境使用
this[NavigationMixin.Navigate]({...}).then(() => {
  setTimeout(() => {
    pubsub.fire("CNCFacilityLocationsDetailsPage", "recordData", { rowData: row });
  }, 500);
});

同时要确认目标FlexCard的订阅代码正确，需在connectedCallback中订阅：

connectedCallback() {
  pubsub.subscribe("CNCFacilityLocationsDetailsPage", "recordData", (payload) => {
    console.log('Received row data', payload.rowData);
    // 处理数据逻辑
  });
}

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