How to form the Query string in web address url in

2019-03-04 11:24发布

问题:

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.

Not working in dynamic:

$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:

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

working fine:

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

App:

 .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?

回答1:

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.

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