How to form the Query string in web address url in Angular state router by using state go method

泪湿孤枕 提交于 2019-12-04 05:51:52

问题


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



来源:https://stackoverflow.com/questions/37994004/how-to-form-the-query-string-in-web-address-url-in-angular-state-router-by-using

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!