Lightning Web コンポーネント (LWC) には、コンポーネントを DOM に挿入し、レンダリングし、DOM からコンポーネントを削除するための独自のライフサイクルがあります。 ConnectedCallback() (マウントフェーズ) は、コンポーネントが DOM に挿入されるときに起動される LifeCycle メソッドの 1 つです。このガイドでは、connectioncallback() と、このメソッドを含むさまざまなシナリオについて例を挙げて説明します。
- constructor() は、「Component」インスタンスの作成時に呼び出されるライフサイクル フックの最初のメソッドです。この段階ではコンポーネントのプロパティは準備ができていません。ホスト要素にアクセスしたい場合は、「this.template」を使用する必要があります。このフェーズでは子コンポーネントが存在しないため、子コンポーネントにもアクセスできません。このメソッドでは Super() が使用されます。
- Connectedcallback() は、要素が DOM に挿入されるときに呼び出される 2 番目のメソッド (フェーズ 2) です。この場合、フックは親から子へと流れます。この段階ではコンポーネントのプロパティは準備ができていません。ホスト要素にアクセスしたい場合は、「this.template」を使用する必要があります。このフェーズでは子コンポーネントが存在しないため、子コンポーネントにもアクセスできません。
- 与える (): ext フェーズはレンダリング中です。親コンポーネントがレンダリングされ、次に子コンポーネントが存在する場合はレンダリングされます。親をレンダリングした後、子コンポーネント (コンストラクター、connectedcallback、render) に進み、親と同じ手順に従います。
- レンダリングされたコールバック (): コンポーネントのレンダリングが完了し、その後何らかの操作を実行する場合、このメソッドが呼び出されます。
- 切断されたコールバック (): この段階では、要素が DOM から削除されます (connectedcallback() の反対側)。
- LifeCycle でエラーが発生すると、errorCallback() が呼び出されます。
Connectedcallback() 構造体
Connectedcallback() の使用:
- 変数を定義し、プロパティ値を設定します。
- その中で Apex を呼び出します。
- イベントを作成して送信します。
- UI APIを呼び出すことができます。
- その中にあるナビゲーションサービス。
次のように JavaScript ファイルで指定する必要があります。
接続済みコールバック ( ） {
// する…
}
すべての例では、この「meta.xml」ファイルを使用します。各例ではこれを指定しません。 LWC コンポーネントは、レコード ページ、アプリ ページ、およびホームページに追加できます。
バージョン = 「1.0」 ?>
<公開されている> 真実 < / 露出しています>
<ターゲット>
<ターゲット> lightning__RecordPage < / ターゲット>
<ターゲット> lightning__AppPage < / ターゲット>
<ターゲット> lightning__ホームページ < / ターゲット>
< / ターゲット>
< / ライトニングコンポーネントバンドル>
例 1:
コンポーネントが UI にロードされるときの、constructor() フェーズと Connectedcallback() フェーズを示します。
ConnectedCallBack.html
<テンプレート><稲妻カード タイトル = 「接続されたコールバック」 >
< / ライトニングカード>
< / テンプレート>
ConnectedCallBack.js
// マウントフェーズ -constructor()コンストラクタ ( ） {
素晴らしい ( ）
コンソール。 ログ ( 「コンストラクターが呼ばれました」 ）
}
// マウントフェーズ - ConnectedCallback()
接続済みコールバック ( ） {
コンソール。 ログ ( 「connectedCallbackが呼び出されました」 ）
}
次のようになります。
出力：
このコンポーネントを任意のオブジェクトの「レコード」ページに追加します。
ページを検査します (左をクリックして「検査」を選択します)。次に、「コンソール」タブに移動します。
例 2:
この例では、トラック デコレーターを使用してフルーツを作成し、connectedcallback() メソッド内でプロパティ値を「Mango」に設定します。これはUI上に表示されます。
最初の例.html
<テンプレート><稲妻カード タイトル = 「プロパティの設定」 >
< ディビジョン クラス = 「slds-var-m-around_medium」 >
< b > 果物の名前： < / b > {フルーツ}
< / ディビジョン >
< / ライトニングカード>
< / テンプレート>
最初の例.js
輸入 { 稲妻要素 、 追跡 } から '運' ;輸出 デフォルト クラス 最初の例 伸びる 稲妻要素 {
@ トラックフルーツ ;
接続済みコールバック ( ） {
// プロパティ値を Mango に設定します
これ 。 フルーツ = 'マンゴー' ;
}
}
出力：
このコンポーネントを任意のオブジェクトの「レコード」ページに追加します。ここでは、「取引先レコード」ページに追加します。果物は「マンゴー」であることがわかります。
例 3:
前のコードを利用して、「js」ファイルと「html」ファイル内のいくつかのステートメントを変更します。
「js」ファイルに「number」500の新しい変数を作成します。数値が 500 より大きい場合は、フルーツを「500 より大きい」に設定します。それ以外の場合は、フルーツを「500 に等しい」に設定します。
最初の例.html
<テンプレート><稲妻カード タイトル = 「プロパティの設定」 >
< ディビジョン クラス = 「slds-var-m-around_medium」 >
< b > 料金： < / b > {フルーツ}
< / ディビジョン >
< / ライトニングカード>
< / テンプレート>
最初の例.js
@ トラックフルーツ ;接続済みコールバック ( ) {
番号を聞かせてください = 500 ;
もし ( 番号 > 500 ) {
これ 。 フルーツ = 「500以上」 ;
}
それ以外 {
これ 。 フルーツ = 「500に等しい」 ;
}
}
出力：
数値は 500 です。したがって、フルーツは結果を「500 に等しい」と保持します。
例 4:
このシナリオでは、connectedcallback() メソッドを使用してアカウント レコード (Account オブジェクト) を返します。
- まず、ID、名前、業界、および評価フィールドを持つ最初の 10 個のアカウントのリストを返す Apex クラスを作成します。
- 次に、アカウントを追跡し、Apex クラスからメソッドを呼び出して、connectedcallback() メソッドでアカウントを返します。
- HTML ファイルでは、アカウントを反復して名前と業界を返す各ディレクティブにこれを使用します。
アカウントデータ.apxc
public と共有クラス AccountData {@AuraEnabled(キャッシュ可能=true)
public static List<アカウント> returnAcc(){
List<アカウント> accountList = [アカウント制限 10 から ID、名前、業界、評価を選択];
アカウントリストを返します。
}
}
2 番目の例.html
<テンプレート><稲妻カード タイトル = 「アカウントの一覧を表示」 >
< ディビジョン クラス = 「slds-var-m-around_medium」 >
<テンプレートの場合: true = { アカウント } >
<テンプレート のために ：それぞれ = { アカウント } のために ：アイテム = 「アカウント_rec」 >
< p 鍵 = { アカウント_rec。 ID } >< b > アカウント： < / b > {アカウント_rec.Name} < b > 業界： < / b > {account_rec.Industry} < / p >
< / テンプレート>
< / テンプレート>
< / ディビジョン >
< / ライトニングカード>
< / テンプレート>
2番目の例.js
Apex から returnAcc をインポートする クラス :輸入 からの戻り値 「@salesforce/apex/AccountData.returnAcc」 ;
書く これ 「js」内のコード クラス :
@ アカウントを追跡する ;
@ トラックエラー ;
接続済みコールバック ( ) {
戻り値 ( )
// アカウントを返します
。 それから ( 結果 => {
これ 。 アカウント = 結果 ;
これ 。 エラー = 未定義 ;
} )
。 キャッチ ( エラー => {
これ 。 エラー = エラー ;
これ 。 アカウント = 未定義 ;
} ) ;
}
出力：
最初の 10 件のアカウント レコードがアカウント名と業種とともに返されます。
結論
LWC で Apex データを操作する際、ほとんどの場合、connectedcallback() メソッドを使用できるようになりました。このガイドでは、connectedcallback() を使用してプロパティ値を設定する方法と、それに Apex を含める方法について説明しました。理解を深めるために、最初に、constructor() メソッドと Connectedcallback() メソッドを示す例を提供しました。 Web ページを検査し、コンソールで表示する必要があります。