如何在页面调用utility bar并传递参数至lwc组件

本文主要是介绍如何在页面调用utility bar并传递参数至lwc组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.在app的utility item中添加lwc组件：

2.调用utility bar api的方式有两种：

方法一，通过lwc调用：

import {LightningElement,api ,wire   } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import CallCenterMessageChannel from '@salesforce/messageChannel/callCenterChannelName__c';
import{open , getAllUtilityInfo} from 'lightning/platformUtilityBarApi';
import { CloseActionScreenEvent } from 'lightning/actions';export default class CallCenterMessageService extends LightningElement {@api selectedIds; // 从 Flow 传递的记录 ID@api recordId@wire(MessageContext)messageContext;// 当组件加载时处理记录 IDasync connectedCallback() {// console.log('Selected Record IDs: ', this.selectedIds);console.log('record Id: ', this.recordId);debuggerawait this.handleOpen();setTimeout(() => {this.handlePublish();this.closeQuickAction()}, 1000); // 延迟1000毫秒，可以根据情况调整时间}//调用utility api打开utility barasync handleOpen(){debuggerconst unitilyInfo=await getAllUtilityInfo();for (let i = 0; i < unitilyInfo.length; i++) {console.log('util at index', i, ':', unitilyInfo[i]);if(unitilyInfo[i].utilityLabel==='呼叫控制台'){open(unitilyInfo[i].id);}}}//publish事件至channelhandlePublish(){// debugger// console.log('handlePublish--Selected Record IDs: ', JSON.stringify(this.selectedIds));const payload = { recordId:  this.recordId};publish(this.messageContext, CallCenterMessageChannel, payload);}closeQuickAction() {this.dispatchEvent(new CloseActionScreenEvent());}}

方式二，通过aura调用：

handleGetUtilityInfo: function (component, event, helper) {debuggervar utilityBarAPI = component.find("utilitybar");console.log('utilityBarAPI--->' + JSON.stringify(utilityBarAPI));console.log('utilityBarAPI--->' + JSON.stringify(utilityBarAPI.getAllUtilityInfo()));utilityBarAPI.getAllUtilityInfo().then(function (response) {console.log(response.length);console.log(JSON.stringify(response));for (let i = 0; i < response.length; i++) {var myUtilityInfo = response[i];console.log("myUtilityInfo--》" + JSON.stringify(myUtilityInfo));if (myUtilityInfo.utilityLabel === '呼叫控制台') {utilityBarAPI.openUtility({utilityId: myUtilityInfo.id});}}})setTimeout(() => {// this.handlePublish();}, 1000); // 延迟1000毫秒，可以根据情况调整时间},handlePublish: function (cmp, event, helper) {var payload = {recordId: cmp.get("v.recordId")};cmp.find("callCenterMessageChannel").publish(payload);}

3.传递参数，通过message channel publish事件，在utility bar中lwc/aura组件订阅事件接受参数：

  handleCallCenterChannel: function (cmp, message, helper) {// debugger;console.log("订阅信息！！");if (message != null && message.getParam("recordId") != null) {console.log("recordId--->" + message.getParam("recordId"));cmp.set("v.recordId", message.getParam("recordId"));}},

tips：publish事件之前，需要提前open utility bar，否则utility bar中组件无法订阅

这篇关于如何在页面调用utility bar并传递参数至lwc组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---