1. ホーム
  2. angularjs

[解決済み] AngularJSのuiルータは、URLなしで状態間のデータを渡す

2022-05-09 17:33:35

質問

私は、URLでデータを公開することなく、2つの状態間でデータを渡すこの問題に直面している、それはユーザーが実際にこの状態に直接着陸できないようなものです。

例えば 私は2つの状態 "A" と "B" を持っています。 私は状態 "A"でいくつかのサーバー呼び出しを行い、呼び出しの応答を渡します。 を状態 "B"に変更します。サーバーコールの応答は文字列メッセージで、かなり長いので、私はURLでそれを公開することはできません。

だから、URLのパラメータを使用せずに、状態間のデータを渡すために、アンギュラーuiルータで何か方法はありますか?

どのように解決するのですか?

を使用することができます。 params , 新しい UI-Routerの機能です。

API リファレンス / ui.router.state / $stateProvider

params オプションでurlで宣言されたパラメータを設定したり、url以外の追加パラメータを定義するマップです。設定されるパラメータごとに、パラメータ名をキーとする設定オブジェクトを追加します。

部分参照:" ...または、追加の非urlパラメータを定義する... "です。

つまり、状態のdefはこうなる。

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { hiddenOne: null, }
  })

いくつかの例では 上記のドキュメント :

// define a parameter's default value
params: {
  param1: { value: "defaultValue" }
}
// shorthand default values
params: {
  param1: "defaultValue",
  param2: "param2Default"
}

// param will be array []
params: {
  param1: { array: true }
}

// handling the default value in url:
params: {
  param1: {
    value: "defaultId",
    squash: true
} }
// squash "defaultValue" to "~"
params: {
  param1: {
    value: "defaultValue",
    squash: "~"
  } }

EXTEND - 作業例です。 http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

以下は、状態の定義の例です。

 $stateProvider
  .state('home', {
      url: "/home",
      params : { veryLongParamHome: null, },
      ...
  })
  .state('parent', {
      url: "/parent",
      params : { veryLongParamParent: null, },
      ...
  })
  .state('parent.child', { 
      url: "/child",
      params : { veryLongParamChild: null, },
      ...
  })

これは、ui-srefを使った呼び出しかもしれません。

<a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  })">home</a>

<a ui-sref="parent({ 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  })">parent</a>

<a ui-sref="parent.child({
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  })">parent.child</a>

例を確認する こちら