我玩弄新的角度路由器，并想尝试一个用例，我有一个组件和一个嵌套组件。角度新的路由器 - 嵌套组件和路由

下面还有JavaScript代码我写来定义两个组件和路线：

angular.module('app', ['ngNewRouter']) 
    .controller('AppController', function ($router) { 

    $router.config([ 
    { 
     path: '/parent', 
     component: 'parent' 
    } 
    ]); 

}) 
.controller('ParentController', function ($router) { 

    this.name = 'Parent component'; 
    $router.config([ 
    { 
     path: '/child', 
     component: 'child' 
    } 
    ]); 

}) 
.controller('ChildController', function() { 

    this.name = 'Child component'; 

}) 
.config(function ($componentLoaderProvider) { 

    $componentLoaderProvider.setTemplateMapping(function (compName) { 
    return compName + '.html'; 
    }); 

});

和HTML部分：

<!-- index.html --> 
<body ng-controller="AppController as app"> 
    <a ng-link="parent">Go to parent</a> 
    <div ng-viewport></div> 
</body> 

<!-- parent.html --> 
{{ parent.name }}<br/> 
<a ng-link="child">Show child</a> 
<div ng-viewport></div> 

<!-- child.html --> 
{{ child.name }}

下面是一个包含上面的代码Plunker：http://plnkr.co/edit/yWCFgXQI491EYvIldjyR

基于此代码，我有以下问题/问题：

如果我进入最低级别（＃/父/子），然后点击刷新，父组件和子组件不再显示。即使URL仍然相同，路由也不会恢复。我是否需要转发或者做些什么来恢复页面的状态？这是能够为URL添加书签的非常基本的功能。
如果我到最低级别（＃/父/子），然后点击转到父级链接，该URL被正确设置为＃/ parent但子组件仍然可见。

来源

2015-05-20 Alain

这个问题可能是相关的：https：//github.com/angular/router/issues/222 – wemu

一些更多的讨论是在https://github.com/angular/router/issues/117以及 – wemu

我也在GitHub上打开了一个问题：https：//github.com/angular/router/issues/334 – Alain

第一件让我印象深刻的是，你没有使用任何指向你想要显示的父母和孩子的标识符。

如何/你在哪里得到这些信息？您的网址看起来要好很多（也许甚至解决问题，如果它被写成

/parent/:parentId/

或

/parent/:parentId/child/:childId.

我大部分使用routeProvider和routeParameters自己，他们提供了这个功能，而不任何麻烦，但因为这似乎excersise似乎纯粹学术，我会尝试通读什么模块实际上在做，以及检查是否有一个相关问题之间的github问题。

此外，this page from the documentation似乎至在这个问题上提出了一些问题。

如果这不能帮助你，你会考虑给我们提供更多的信息来帮助我们吗？

祝你好运！

来源

2016-08-08 18:12:18

这是老方法＃

var app = angular.module("app", ["ngRoute"]); 
 
app.config(function($routeProvider) { 
 
    $routeProvider 
 
    .when("/", { 
 
     templateUrl : "parent.htm" 
 
    }) 
 
    .when("/other", { 
 
     templateUrl : "Default.htm" 
 
    }); 
 
});

来源

2017-11-27 07:11:41

**使用我们可以做新的方式进行路由这个** （函数（）{ “使用严格”。角 .module（“应用”， ['parent'，'home'，'ngNewRouter']） .controller（'AppController'，function（$ router）{ this.header ='TITLE'; $ router.config（[ { path：' /'，component：'home' }， { path：'/ parent'，component：'parent' } ]）; }）; }）（）; **我希望这会起作用。** –

**Using new way we can do perform routing this .** 
 

 

 
(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('app', ['parent', 'home', 'ngNewRouter']) 
 
    .controller('AppController', function ($router) { 
 
     this.header = 'TITLE'; 
 
     $router.config([ 
 
     { 
 
      path: '/', component: 'home' 
 
     }, 
 
     { 
 
      path: '/parent', component: 'parent' 
 
     } 
 
     ]); 
 
    }); 
 
})(); 
 
**I hope this will work .**

来源

2017-11-27 07:17:39

您也可以尝试使用UI Router。

如果你想使用嵌套路由，你也可以看看this。

来源

2017-12-19 09:22:01

不完整的答案 –

角度新的路由器 - 嵌套组件和路由

回答

这是老方法＃

相关问题