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

问题描述

我有一个产品列表页面，其中有产品列表，当单击特定产品时，调用该功能并进入功能状态.

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: 例如)stateparams.productId = redminote，但网址未构建 **

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

工作正常:

当我在参数中设置值时，我得到了上面提到的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();

            }
        }

为什么网址不是动态生成的?

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 
                 }
           );
        }
    }]

这会中断状态更改，并将其替换为新目标，该目标现在已填充有您的目标，并且在本示例中使用的options对象中具有自定义键，因此不会再次重定向状态更改.

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屋！