AngularJS进阶(二)AngularJS路由问题解决

AngularJS进阶(二)AngularJS路由问题解决AngularJS路由问题解决遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去。再加一层地址解决了,但是后来发现问题还是来了:Couldnotresolve’yhDtlMaintain/yhdetail’fromstate’yhMaintain’药店详情http://192.168.1.118:8088/lmapp/index.html#/0优惠券详情

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

AngularJS路由问题解决

遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去。再加一层地址解决了,但是后来发现问题还是来了:

Could not resolve ‘yhDtlMaintain/yhdetail’ from state ‘yhMaintain’

药店详情          http://192.168.1.118:8088/lmapp/index.html#/0

优惠券详情      http://192.168.1.118:8088/lmapp/index.html#/0

优惠活动详情  http://192.168.1.118:8088/lmapp/index.html#/index/0

经过url的对比,自己发现了问题。其中药店详情和优惠券详情的url是相同的。而之前自己在优惠活动详情中改动了一下,结果正常显示。然后自己接着查看优惠活动的修改地方,发现:

/*————————–优惠活动详情维护————————–*/

   .state(‘yhhdDtlMaintain’, {

       url: ‘/index/{yhid}’,

       views: { //注意这里的写法,当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作

            : {

               templateUrl: ‘rightInfoList.html’

               },

            ‘sys_banner@yhhdDtlMaintain’: {

               templateUrl: ‘sys_banner.html’

               },

             ‘rightContent@yhhdDtlMaintain’: {

               templateUrl: function($stateParams){

               console.log(“YHID:”);

               console.log($stateParams);

               return ‘yh_set_dtl.html’;

                } 

              }

           }

    }) 

玄机藏在url中,其实这个url是在浏览器中访问的url,基于用户浏览该应用所在的状态。同理,自己修改了优惠券详情的路由,如下:

/*—————————–优惠券详情维护—————————–*/

  .state(‘yhqDtlMaintain’, {

     url: ‘/yhqIndex/{yhid}’,

     views: { //注意这里的写法,当一个页面上带有多个ui-view的时候如何进行命名和视图模板的加载动作

         : {

             templateUrl: ‘rightInfoList.html’

             },

         ‘sys_banner@yhqDtlMaintain’: {

              templateUrl: ‘sys_banner.html’

             },

         ‘rightContent@yhqDtlMaintain’: {

              templateUrl: function($stateParams){

              console.log(“YHQID:”);

              console.log($stateParams);

              return ‘yh_set_dtl.html’;

              } 

           }

        }

 })  

这样所有的问题就迎刃而解了。但自己还是需要深入理解一下相关原理。若之前不做修改的话,优惠券详情的url就会与药店详情相同,药店详情页面覆盖了优惠券详情页面。

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/164213.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Linux下Opengrok安装部署与使用

    Linux下Opengrok安装部署与使用OpenGrok简单安装配置说明

    2022年5月18日
    41
  • CentOS下yum的安装及配置

    CentOS下yum的安装及配置一般公司都用Linux来搭建服务器,Linux安装软件时能够用yum安装依赖包是一件非常简单而幸福的事情,因为你只需一个简单的安装命令yuminstall[]即可安装相应的软件,yum工具会自动的从网上yum源中下载相应的依赖包,并以正确的依赖关系一个个安装依赖包。下面简单介绍一下CentOS下安装yum源的流程和操作。一、查看、卸载已安装的yum包1、查看已安装的yum包

    2022年6月3日
    91
  • STL之Stringstream字符串流使用总结

    STL之Stringstream字符串流使用总结如果你已习惯了风格的转换,也许你首先会问:为什么要花额外的精力来学习基于的类型转换呢?也许对下面一个简单的例子的回顾能够说服你。假设你想用sprintf()函数将一个变量从int类型转换到字符串类型。为了正确地完成这个任务,你必须确保证目标缓冲区有足够大空间以容纳转换完的字符串。此外,还必须使用正确的格式化符。如果使用了不正确的格式化符,会导致非预知的后果。下面是一个例子:intn

    2022年6月6日
    26
  • pycharm配置远程服务器解释器_pycharm中使用jupyter

    pycharm配置远程服务器解释器_pycharm中使用jupyter前段时间,在pycharm里配置了远程的Python解释器,然后在使用过程中,发现pycharm原来是可以使用Jupyter的文件,而且还可以配置远程的Jupyter环境,今天试了一下,一开始还是走了一些坑,今天梳理一下。我们可以通过以下方式创建JupyterNotebook文件:根据自己需要,给文件命名。然后就创建了一个后缀为ipynb文件。用一段测试代码测试一下:importnumpyasnpx=np.arange(15,dtype=np.int64)

    2022年8月28日
    2
  • windows下如何安装Composer?

    windows下如何安装Composer?

    2021年10月20日
    115
  • 4.pycharm添加第三方库[通俗易懂]

    4.pycharm添加第三方库[通俗易懂]网络爬虫的第一步就是根据URL,获取网页的HTML信息。在Python3中,可以使用urllib.request和requests进行网页爬取。(1)准备所需库我们需要准备一款名为BeautifulSoup(网页解析)的开源库,用于对下载的网页进行解析,我们是用的是PyCharm编译环境所以可以直接下载该开源库。urllib库是python内置的,无需我们额外安装,只要安装了Python就可以使用这个库。requests库是第三方库,需要我们自己安装。第三方库安装步骤如下:选择File-&g

    2022年8月29日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号