ホームページ > 記事 > ウェブフロントエンド > ui-srefを使用してUI-Routerの状態にパラメータを渡すにはどうすればよいですか?
UI-Router では、ui-sref 経由で遷移するときにパラメータを状態に渡すには、特定の構成が必要です。手順を詳しく見てみましょう:
1. URL パラメータの定義:
状態の url プロパティで予期される URL パラメータを定義します。構文は:paramName?ここで、paramName は受信するパラメータです。例:
.state('home', { url: '/:foo?bar',
2.パラメータ値を ui-sref に割り当てます:
パラメータ値を中かっこ内のオブジェクトとして ui-sref に渡します。構文は ui-sref="stateName({paramName: 'value', ...})" です。例:
<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home with foo and bar parameters</a>
3.コントローラーで $stateParams を利用します:
宛先状態のコントローラーで、渡されたパラメーターを含む $stateParams を注入します。 $stateParams.paramName を使用して値を取得します。例:
app.controller('SomeController', function($scope, $stateParams) { var foo = $stateParams.foo; var bar = $stateParams.bar; })
4. URL 以外のパラメータの受け渡し:
URL のパラメータに加えて、状態の params 設定で追加のパラメータを定義できます。これにより、URL の一部ではないパラメータを渡すことができます。例:
.state('home', { url: '/:foo?bar', params: { foo: { value: 'defaultValue', squash: false, }, hiddenParam: 'YES' }
params で定義されたパラメータは、$state.go() または ui-sref を使用して渡すことができます。 URL には含まれません。
5.配列パラメータ:
params 設定で array: true を設定することで、パラメータを配列として宣言することもできます。例:
params: { bar: { array: true, } }
配列値を渡すときは必ず角中括弧を使用してください:
<a ui-sref="home({foo: 'fooVal1', bar: ['barVal1', 'barVal2']})">...</a>
以上がui-srefを使用してUI-Routerの状態にパラメータを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。