registerRefreshContainer()ディスパッチされた更新イベントを受信して、更新処理を開始するコンテナを登録します。RefreshView API を使用するには、RefreshEvent を受信するように登録したコンポーネントをページ上のいずれかの場所に配置する必要があります。
1import { LightningElement, wire } from "lwc";
2import { registerRefreshContainer } from "lightning/refresh";
3
4export function registerRefreshContainer(contextElement, providerMethod);contextElement — (必須) 更新イベントを受信するコンテナを表す HTMLElement。providerMethod — (必須) 更新処理の開始時に呼び出すコールバックメソッドを特定する Function。このコールバックは、更新処理全体の状況を表す Promise をパラメータとして受け取ります。更新イベントを受け取るコンテナを一意に識別するための数値の refreshNode.handle 値を返します。この値を unregisterRefreshContainer() に渡すことで、コンポーネントでの更新イベントの受信を停止できます。
コンテナの connectedCallback() 内で registerRefreshContainer() メソッドを使用して、RefreshEvent 信号の受信を登録します。
Lightning Locker が有効な組織でコンポーネントを実行する必要がある場合、connectedCallback() 内のコードコメントで、registerRefreshContainer() パラメータの変更された形式を使用します。
Tip
1import { LightningElement } from "lwc";
2import {
3 registerRefreshContainer,
4 unregisterRefreshContainer,
5 REFRESH_ERROR,
6 REFRESH_COMPLETE,
7 REFRESH_COMPLETE_WITH_ERRORS,
8} from "lightning/refresh";
9
10export default class RefreshContainer extends LightningElement {
11 refreshContainerID;
12 connectedCallback() {
13 this.refreshContainerID = registerRefreshContainer(this, this.refreshContainer);
14 // if the component runs in an org with Lightning Locker instead of LWS, use
15 // this.refreshContainerID = registerRefreshContainer(this.template.host, this.refreshContainer.bind(this));
16 }
17 disconnectedCallback() {
18 unregisterRefreshContainer(this.refreshContainerID);
19 }
20 refreshContainer(refreshPromise) {
21 console.log("refreshing");
22 return refreshPromise.then((status) => {
23 if (status === REFRESH_COMPLETE) {
24 console.log("Done!");
25 } else if (status === REFRESH_COMPLETE_WITH_ERRORS) {
26 console.warn("Done, with issues refreshing some components");
27 } else if (status === REFRESH_ERROR) {
28 console.error("Major error with refresh.");
29 }
30 });
31 }
32}this を registerRefreshContainer() に渡すと、RefreshEvent の要素にイベントリスナーがバインドされます。
登録済みの更新コンテナで RefreshEvent が受信されると、その更新ツリーで更新処理が開始されます。
RefreshEvent は DOM のイベントバブルのルールに従うため、この処理を開始する更新コンテナは、通知元のコンポーネントに最も近い登録済み上位ノードになります。ページ全体を更新するには、適切なレベルでコンテナを登録するか、ページホストがコンテナとして機能するように設定する必要があります。
Note
登録済みコンテナのコールバック (この例では refreshContainer()) は、コンテナが RefreshEvent を受信すると呼び出されます。コールバックは、更新処理の開始時にパラメータとして Promise を受け取ります。この Promise は、更新処理が完了すると RefreshStatus の値で解決されます。
登録済みコンテナのコールバックメソッドは、次のような更新関連の処理を管理するために使用することができます。
disconnectedCallback() で、unregisterRefreshContainer() メソッドを使用して、更新コンテナとして登録されているビューコントローラを解除する必要があります。
The Japanese Summer '24 guide is now live
j