この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

force:navigateToComponent から lightning:isUrlAddressable への移行

pageReference JavaScript オブジェクトは、ページの URL を表します。URL を直接解析または作成する代わりに、pageReference を使用できます。この方法を使用すれば、Salesforce が今後 URL 形式を変更することがあっても、ナビゲーションの破損を避けられます。

現在 force:navigateToComponent イベントを使用している場合、lightning:isUrlAddressable を使用するコンポーネントに要求をリダイレクトして、ブックマークされたリンクの後方互換性を提供できます。

まずは元のコンポーネントを、その定義、コントローラ、ヘルパー、レンダラ、CSS を含めてコピーします。新しいコンポーネント実装を lightning:isUrlAddressable インターフェースにします。

cmp.get("v.pageReference").state からのナビゲーション要求で渡された値を読み取るように新しいコンポーネントを変更します。

双方向バインドを使用して、pageReference.state の値を、それらの値を設定するサブコンポーネントに対応付けることはできません。state オブジェクトは変更できません。回避策として、ハンドラを使用して pageReference.state の値を独自のコンポーネントの属性にコピーします。

1// Add a handler to your component 
2<aura:handler name="init" value="{!this}" action="{!c.init}" />
3
4// Controller example
5({
6    init: function(cmp, event, helper) {
7        var pageReference = cmp.get("v.pageReference");
8        cmp.set("v.myAttr", pageReference.state.c__myAttr);
9        // myAttr can be modified, but isn’t reflected in the URL 
10    }
11})

メモ

新しいコンポーネントで、コンポーネントの init ハンドラでページの state の値をコピーするのに使用されていない URL から対応付けられた属性を削除します。

古いコンポーネントに移動するインスタンスを新しい API と新しいコンポーネントのアドレスに変更します。たとえば、$A.get("e.force:navigateToComponent").setParams({componentDef: "c:oldCmp", attributes: {"myAttr": "foo"}}).fire(); などの force:navigateToComponent のインスタンスを削除します。

コンポーネントマークアップに <lightning:navigation aura:id="navigationService" /> を追加し、navigationService を使用するように更新します。pageReference を渡します。

1cmp.find("navigationService").navigate({
2    type: "standard__component",
3    attributes: {
4        componentName: "c__myCmpCopy" 
5    },
6    state: { 
7        "c__myAttr": "foo" 
8    }
9});

元のコンポーネントの init ハンドラで、新しいコンポーネントに移動するナビゲーションリダイレクト要求を送信します。navigate API コールの 3 つ目のコールを true として渡します。この引数は、要求でブラウザ履歴の現在のエントリを置き換え、ブラウザのナビゲーションボタンを使用したときに追加エントリが発生しないことを示します。

1({
2    init: function(cmp, event, helper) {
3        cmp.find("navigation").navigate({
4            type: "standard__component",
5            attributes: {
6                componentName: "c__componentB" },
7            state: {
8                c__myAttr: cmp.get("v.myAttr")
9            } 
10        }, true); // replace = true 
11    }
12})

元のコンポーネントの定義、コントローラ、ヘルパー、レンダラ、CSS からその他すべてのコードを削除します。ナビゲーションリダイレクトコールのみを残します。

Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)

force:navigateToComponent から lightning:isUrlAddressable への移行