我玩弄新的角度路由器，並想嘗試一個用例，我有一個組件和一個嵌套組件。角度新的路由器 - 嵌套組件和路由

下面還有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

不完整的答案 –

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

回答

這是老方法＃

相關問題