如何使用 ui-sref 將參數傳遞給 UI-Router 中的狀態？

理解UI-Router 中使用ui-sref 的參數傳遞

在UI-Router 中，透過ui-sref 轉換時將參數傳遞到狀態需要特定的配置。讓我們深入研究一下步驟：

1.定義 URL 參數：

在狀態的 url 屬性中定義預期的 URL 參數。語法是：參數名稱？其中 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中文網其他相關文章！