如何使用 state go 方法在 Angular 状态路由器中的网址 url 中形成查询字符串 [英] How to form the Query string in web address url in Angular state router by using state go method

问题描述

我有一个产品列表页面，有产品列表，当点击特定产品时，调用函数并在函数 state.go 中.

I have a product list page, there have list of products,when click the particular products, call the function and in the function state.go.

不能动态工作:

$state.go('home.product.detail', {'productID': "redminote4", 'brand': 'x', "store":"amazon" });

$state.go('home.product.detail', { 'productID': "redminote4", 'brand': 'x', "store":"amazon" });

.state('home.product.detail', {
    url: '/products/:?productID?brand?store',
    views: {
        '@': {
            templateUrl: baseUrl + 'products/products',
            controller: 'productsController'
        }
    },
    data: {
        displayName: '',
        displayImg: 'Images/productsHeaderIcon.png'
    }, resolve: {

        param2: function (LoginHome) {

            return LoginHome.getHomeService1();

        }
    }

**

Output  weburl need to be:
productID=redminote4&brand=amazon&store=amazon:

另一件事是价值正在进入状态参数:例如)stateparams.productId=redminote 但未构造 url**

other thing is value is getting in stateparams: eg) stateparams.productId=redminote but url not constructed **

工作正常:

当我在 param 中设置值时，我得到了上面提到的 outputurl:

when i set the value in param i am getting the outputurl mentioned in above:

**function call:**

$state.go('home.product.detail', { 
'productID': "redminote4", 'brand': 'x', "store":"amazon" });

应用:

 .state('home.product.detail', {
  url: '/products/:?productID?brand?store',
params:{
'productID': "redminote4", 
'brand': 'x', 
"store":"amazon" }

},
        views: {
            '@': {
                templateUrl: baseUrl + 'products/products',
                controller: 'productsController'
            }
        },
        data: {
            displayName: '',
            displayImg: 'Images/productsHeaderIcon.png'
        }, resolve: {

            param2: function (LoginHome) {

                return LoginHome.getHomeService1();

            }
        }

为什么url不是动态形成的?

why the url not formed in dynamic?

推荐答案

参数在你的 url 中定义的方式不正确.无论如何，一种选择是使用生命周期方法并返回一个目标

The way the parameters are defined in your url is incorrect. Anyway, one option is to use the lifecycle methods and return a target

.state('home.product.detail', {
    url: '/products/?productID&?brand&?store',
    params:{
        'productID': {
            value: "redminote4", 
            squash: true
        }
        'brand': {
            value: "x", 
            squash: true
        }, 
        'store': {
            value: "amazon", 
            squash: true
        }
},
data: {
    displayName: '',
    displayImg: 'Images/productsHeaderIcon.png'
},
onEnter: ['$transition$', '$state$', 'LoginHome', function(transition, state, LoginHome){

    if(!transition.options().resolvedParams){
       return transition.router.stateService.target(
                 transition.to().name, 
                 {
                    productID: 'redminote4', 
                    brand: 'x', 
                    store:'amazon'
                 },
                 { 
                    resolvedParams: true 
                 }
           );
        }
    }]

这会中断状态更改并将其替换为您的新目标，该目标现在填充了您的参数，并且我在本示例中使用的选项对象中有一个自定义键，不会再次重定向状态更改.

This interrupts the state change and replaces it with your new target which now is populated with your parameters and has a custom key in the options object that I'm using in this example to not redirect the state change again.

您可以在此处了解有关生命周期的更多信息 和我们返回的 TargetState 这里

You can learn more about the lifecycle here and the TargetState we return here

这篇关于如何使用 state go 方法在 Angular 状态路由器中的网址 url 中形成查询字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！