【Salesforce】LWCから他のLWCにNavigationする方法
はじめに
Salesforceにて様々な画面をLightning Web Component（以降：LWC）で作成している時、様々なページに遷移させる中でLWCからLWCに遷移させたいと思う時がありませんか？？
LWCをカスタムタブに設定している時にはNavigationMininにてtype:standard__navItemPageで遷移させることができますが、これはあくまでカスタムタブに設定している時のみです。ただのLWCに遷移させることは現時点で用意されていません...
では方法はないのか？というとそうではありません。具体的にはAura Component を使うことでNavigationさせることができるようになります。
今回はこのAuraを使った遷移方法をご紹介します！
手順
遷移先のLWC作成
lwcHelloWorldというコンポーネント作成します。これはHello world! and Hello {name}を表示するためだけのコンポーネントです。
nameについては親のLWCからAuraを経由して渡すことを想定して進めていきます。
<template>
<lightning-card title="LWC Hello World" icon-name="custom:custom14">
<div class="slds-card__body slds-card__body_inner">
Hello world! and Hello {name}
</div>
</lightning-card>
</template>
次に親のLWCを作成していきます。
親のLWC作成
HTMLはボタンのみを配置します。このボタンをクリックするとNavigationMixinにて遷移することを想定しています。
<template>
<button onclick={handleNavigation}>子LWCに移動</button>
</template>
JSではonclick時の処理を記述します。
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class parent extends NavigationMixin（LightningElement） {
handleNavigation() {
this[NavigationMixin.Navigate]({
type: 'standard__component',
attributes: {
componentName: 'c__sampleAura'
},
state: {
c__name: 'hoge'
}
});
}
}
navigationMixInのtypeは'standard__component'を使用します。attributeには遷移先のLWCを包むAuraコンポーネントの名前を記載します。（Auraコンポーネントについては次のステップで作成します。）
stateは子LWCに渡したいデータを記述していきます。ただこのデータはAura経由で渡すため直接LWCで渡すではないです。
以上で親のLWCの作成は完了です。次に子LWCを包むAuraコンポーネントを作成していきます。
Aura コンポーネントの作成
「Auraコンポーネントを作成」にてsampleAuraという名前で作成します。
作成ができたら下記のようなファイル一式が作成されると思います。
そしたらいくつかのファイルを編集していきます。
cmp
<aura:component implements="lightning:isUrlAddressable">
<aura:attribute name="name" type="String"/>
<c:lwcHelloWorld name="{!v.name}"/>
<aura:handler name="init" action="{!c.init}" value="{!this}" />
</aura:component>
navigationMixinにてAuraに遷移させるためにはAuraコンポーネントにimplements="lightning:isUrlAddressable"を記載する必要があります。
親LWCから受け取るnameを格納するための変数を<aura:attribute name="name" type="String"/>で宣言しています。
<c:lwcHelloWorld name="{!v.name}"/>で遷移先のLWCコンポーネントを挿入しています。同時に渡したい変数もここで渡します。
<aura:handler name="init" action="{!c.init}" value="{!this}" />では2行目で定義した変数nameに値を格納するための初期化処理を行うための記述をしています。具体的な処理内容については次に編集するsampleAuraController.jsに記載していきます。
以上でCMPの編集は完了です。次に初期化処理を行うsampleAuraController.jsを作成していきます。
controller.js
親で渡したState情報をcmpで定義した変数に格納します。
({
init: function (component, event, helper) {
const state = component.get('v.pageReference').state;
const name = state.c__name;
component.set('v.name', name);
}
});
親LWCから渡されたState情報は3行目のcomponent.get('v.pageReference').stateにて取得することができます。値をセットしているのはcomponent.set('v.name', name);になります。
以上でAuraの記述は終了となります。そしてここで全てのコンポーネントの作成が完了しました!
実際に動かしてみるとこのようになると思います。
コンポーネントに遷移できていますね！
さいごに
このようにAuraコンポーネントを経由でLWCからLWCの遷移を実現することができます。
今後もLWC関連の記事を発信していくので興味のある方は是非フォローしていただければと思います！
最後まで読んでいただきありがとうございました！
Discussion