angularjs – 角度新路由器 – 嵌套组件和路由

前端之家收集整理的这篇文章主要介绍了angularjs – 角度新路由器 – 嵌套组件和路由前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用新的角度路由器,想要尝试一个使用组件和嵌套组件的用例.

下面是我写的JavaScript代码来定义两个组件和路由:

  1. angular.module('app',['ngNewRouter'])
  2. .controller('AppController',function ($router) {
  3.  
  4. $router.config([
  5. {
  6. path: '/parent',component: 'parent'
  7. }
  8. ]);
  9.  
  10. })
  11. .controller('ParentController',function ($router) {
  12.  
  13. this.name = 'Parent component';
  14. $router.config([
  15. {
  16. path: '/child',component: 'child'
  17. }
  18. ]);
  19.  
  20. })
  21. .controller('ChildController',function () {
  22.  
  23. this.name = 'Child component';
  24.  
  25. })
  26. .config(function ($componentLoaderProvider) {
  27.  
  28. $componentLoaderProvider.setTemplateMapping(function (compName) {
  29. return compName + '.html';
  30. });
  31.  
  32. });

和HTML部分:

  1. <!-- index.html -->
  2. <body ng-controller="AppController as app">
  3. <a ng-link="parent">Go to parent</a>
  4. <div ng-viewport></div>
  5. </body>
  6.  
  7. <!-- parent.html -->
  8. {{ parent.name }}<br/>
  9. <a ng-link="child">Show child</a>
  10. <div ng-viewport></div>
  11.  
  12. <!-- child.html -->
  13. {{ child.name }}

这是一个包含以上代码的Plunker:http://plnkr.co/edit/yWCFgXQI491EYvIldjyR

基于此代码,我有以下问题/问题:

>如果我去最低级别(#/ parent / child),然后点击刷新,则不再显示父组件和子组件.即使URL仍然相同,路由也不会恢复.我是否需要重新启动或执行某些操作来恢复页面的状态?这是一个非常基本的功能,可以将网址加入书签.
>如果我去最低级别(#/父/子),然后点击转到父链接,URL被正确设置为#/ parent,但子组件仍然可见.

打击我的第一件事是,您没有使用任何指向要显示的父级和子级的标识符.

如何/在哪里获得这些信息?你的网址看起来会更好一些(甚至可以解决这个问题,如果它被写成

  1. /parent/:parentId/

要么

  1. /parent/:parentId/child/:childId.

我自己主要使用routeProvider和routeParameters,他们提供这个功能,没有任何麻烦,但是看起来好像纯粹是学术性的,我会尝试阅读模块实际在做什么以及检查是否存在github问题中的一个相关问题.

此外,this page from the documentation似乎对这个问题有所了解.

如果这不是帮助你,你会考虑通过给我们更多的信息来帮助我们吗?

祝你好运!

猜你在找的Angularjs相关文章