LightningMessageService
参考
https://keneloper.com/i-tried-lightning-message-service/
https://base.terrasky.co.jp/articles/etZAC
https://www.soliantconsulting.com/blog/lightning-message-service/
⇒
上記のデプロイ
https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/message_channel_create.htm
LightningMessageChannel を組織にリリースするには、SFDX プロジェクトを作成します。
XML 定義を force-app/main/default/messageChannels/ ディレクトリに含めます。
LightningMessageChannel のファイル名は、messageChannelName.messageChannel-meta.xml 形式に従います。
これをスクラッチ組織に追加するには、sfdx force:source:push を実行します。
これを Sandbox や Developer Edition 組織などの別の種別の組織に追加するには、sfdx force:source:deploy を実行します。
流れ
⇒
■メタデータ作る
(そのうちSFDCのUIからいけるようなるはず)
TestMessageChannel.messageChannel-meta.xmlを
%プロジェクトルート%\force-app\main\default\messageChannelsに配置
内容
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
<description>Lightning Message Channel for the Lightning Web Components</description>
<isExposed>true</isExposed>
<lightningMessageFields>
<description>changed message</description>
<fieldName>messageText</fieldName>
</lightningMessageFields>
<masterLabel>TestMessageChannel</masterLabel>
</LightningMessageChannel>
■デプロイ
sfdx force:auth:web:login -a test -r https://test.salesforce.com
cd %プロジェクトのルートフォルダ%
sfdx force:source:deploy --sourcepath ./force-app\main\default\messageChannels/TestMessageChannel.messageChannel-meta.xml
※VSCodeでもできる
■使う
・メッセージ発行する側
import { publish, MessageContext } from 'lightning/messageService';
import messageChannel from '@salesforce/messageChannel/TestMessageChannel__c';
~
@wire(MessageContext)
messageContext;
~
handleChangeAddr(event) {
let message = {messageText: 'This is a test'};
publish(this.messageContext, messageChannel, message);
}
・メッセージ受信する側
import { subscribe, MessageContext } from 'lightning/messageService';
import messageChannel from '@salesforce/messageChannel/TestMessageChannel__c';
~
subscription = null;
@wire(MessageContext)
messageContext;
~
connectedCallback() {
this.handleSubscribe();
}
~
handleSubscribe() {
if (this.subscription) {
return;
}
this.subscription = subscribe(this.messageContext, messageChannel, (message) => {
console.log(message.messageText);
});
}