मैं नए कोणीय राउटर के साथ खेल रहा हूं और एक ऐसे मामले का प्रयास करना चाहता हूं जहां मेरे पास एक घटक है और नेस्टेड घटक है।कोणीय नया राउटर - नेस्टेड घटक और रूटिंग

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'; 
    }); 

});

और एचटीएमएल हिस्सा:

नीचे वहाँ जावा स्क्रिप्ट कोड मैं दो घटकों को परिभाषित करने के लिए लिखा था और मार्गों है http://plnkr.co/edit/yWCFgXQI491EYvIldjyR

<!-- 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 ऊपर कोड युक्त है

इस कोड के आधार पर मेरे पास निम्नलिखित प्रश्न/मुद्दे हैं:

यदि मैं निम्नतम स्तर (#/अभिभावक/बच्चे) पर जाता हूं और फिर रीफ्रेश मारा जाता है, तो माता-पिता और बच्चे के घटक अब और नहीं दिखाए जाते हैं। मार्ग अभी भी बहाल नहीं किया गया है, भले ही यूआरएल अभी भी वही है। क्या मुझे का पुनर्निर्माण करने की आवश्यकता है या पृष्ठ के राज्य को पुनर्स्थापित करने के लिए कुछ करें? यूआरएल बुकमार्क करने में सक्षम होने के लिए यह एक बहुत ही बुनियादी सुविधा है।
अगर मैं निम्नतम स्तर (#/माता पिता/बच्चे) के लिए जाना और फिर माता-पिता लिंक करने पर जाएँ पर क्लिक करें, URL सही ढंग #/माता-पिता के लिए निर्धारित है, लेकिन बच्चे घटक अभी भी दिख रहा है।

स्रोत

2015-05-20 Alain

यह समस्या संबंधित हो सकती है: https://github.com/angular/router/issues/222 – wemu

https://github.com/angular/router/issues/117 के साथ-साथ – wemu

में कुछ और चर्चा चल रही है मैंने गिटहब पर भी एक मुद्दा खोला: https://github.com/angular/router/issues/334 – Alain

पहली बात जो मुझे मारती है, यह है कि आप किसी पहचानकर्ता का उपयोग नहीं कर रहे हैं जो माता-पिता और बच्चे को इंगित करता है जिसे आप प्रदर्शित करना चाहते हैं।

आपको यह जानकारी कैसे/कहाँ मिलती है? आपका यूआरएल लगेगा एक बहुत अच्छे (और शायद इस मुद्दे को हल करता है, तो यह रूप में

/parent/:parentId/

या

/parent/:parentId/child/:childId.

लिखा गया था मैं ज्यादातर routeProvider और routeParameters अपने आप का उपयोग किया है, और वे बिना इस कार्यक्षमता प्रदान कोई परेशानी लेकिन जैसा कि ऐसा लगता है कि एक्साइजिस पूरी तरह अकादमिक प्रतीत होता है, मैं मॉड्यूल वास्तव में क्या कर रहा है और यह जांच कर रहा हूं कि गीथब मुद्दों के बीच कोई संबंधित समस्या है या नहीं।

आगे, 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

साथ जाना ** इस मार्ग प्रदर्शन नया तरीका हम कर सकते हैं का उपयोग करते हुए कहा था ** (function() { 'सख्त का उपयोग';। कोणीय .module ('ऐप्लिकेशन', [ 'माता-पिता', 'घर', 'ngNewRouter']) .controller ('AppController', समारोह ($ रूटर) { this.header = 'TITLE'; $ router.config ([ { पथ: '/', घटक:' घर ' }, { पथ:'/अभिभावक ', घटक:' अभिभावक ' } ]); }); })(); ** मुझे आशा है कि यह काम करेगा। ** –

**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

अधूरा उत्तर –

कोणीय नया राउटर - नेस्टेड घटक और रूटिंग

उत्तर

यह पुराना तरीका #

संबंधित मुद्दे