कोणीय 2 - इस .router.parent.navigate ('/ about') का उपयोग करके किसी अन्य मार्ग पर नेविगेट कैसे करें

Question

कोणीय 2 - this.router.parent.navigate ('/ about') का उपयोग करके किसी अन्य मार्ग पर नेविगेट कैसे करें।

यह काम नहीं करता प्रतीत होता है। मैंने location.go ("/ about") की कोशिश की; जैसा कि काम नहीं किया था।

मूल रूप से उपयोगकर्ता द्वारा लॉग इन किए जाने के बाद मैं उन्हें किसी अन्य पृष्ठ पर रीडायरेक्ट करना चाहता हूं।

import {Component} from 'angular2/angular2'; 
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2'; 
import {Router} from 'angular2/router'; 

import {AuthService} from '../../authService'; 

//Model 
class User { 
    constructor(public email: string, public password: string) {} 
} 

@Component({ 
    templateUrl:'src/app/components/todo/todo.html', 
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES] 
}) 

export class Todo { 
    model = new User('Mark@gmail.com', 'Password'); 
    authService:AuthService; 
    router: Router; 

    constructor(_router: Router, _authService: AuthService){ 
     this.authService = _authService; 
     this.router = _router; 
    } 

    onLogin =() => { 
     this.authService.logUserIn(this.model).then((success) => {  

      //This is where its broke - below:   
      this.router.parent.navigate('/about'); 

     }); 
    } 
} 

अग्रिम धन्यवाद:

यहाँ नीचे मेरी कोड है!

Answer 1

निरपेक्ष पथ मार्ग से नेविगेट कर सकते हैं

import {Router} from '@angular/router'; 

this.router= Router; 
this.router.navigateByUrl('/login'); 

आप घटक आप के लिए नेविगेट करना चाहते का URL का निरपेक्ष पथ डाल:वहाँ नेविगेशन के लिए 2 तरीकों, .navigate() और .navigateByUrl()

आप निरपेक्ष पथ मार्ग के लिए विधि .navigateByUrl() का उपयोग कर सकते हैं।

नोट: राउटर की navigateByUrl विधि को कॉल करते समय हमेशा पूर्ण पूर्ण पथ निर्दिष्ट करें।निरपेक्ष पथ एक अग्रणी /

// Absolute route - Goes up to root level  
this.router.navigate(['/root/child/child']); 

// Absolute route - Goes up to root level with route params 
this.router.navigate(['/root/child', crisis.id]); 

सापेक्ष पथ मार्ग

आप रिश्तेदार पथ मार्ग का उपयोग करने, .navigate() विधि का उपयोग करना चाहते हैं के साथ शुरू करना चाहिए।

नोट: यह थोड़ा सहज है कैसे मार्ग काम करता है, विशेष रूप से माता-पिता, भाई-बहन, और बच्चे मार्गों:

// Parent route - Goes up one level 
// (notice the how it seems like you're going up 2 levels) 
this.router.navigate(['../../parent'], { relativeTo: this.route }); 

// Sibling route - Stays at the current level and moves laterally, 
// (looks like up to parent then down to sibling) 
this.router.navigate(['../sibling'], { relativeTo: this.route }); 

// Child route - Moves down one level 
this.router.navigate(['./child'], { relativeTo: this.route }); 

// Moves laterally, and also add route parameters 
// if you are at the root and crisis.id = 15, will result in '/sibling/15' 
this.router.navigate(['../sibling', crisis.id], { relativeTo: this.route }); 

// Moves laterally, and also add multiple route parameters 
// will result in '/sibling;id=15;foo=foo'. 
// Note: this does not produce query string URL notation with ? and & ... instead it 
// produces a matrix URL notation, an alternative way to pass parameters in a URL. 
this.router.navigate(['../sibling', { id: crisis.id, foo: 'foo' }], { relativeTo: this.route }); 

या यदि आपने अभी वर्तमान मार्ग पथ के भीतर नेविगेट करने की आवश्यकता है, लेकिन एक अलग रास्ता पैरामीटर के लिए :

// If crisis.id has a value of '15' 
// This will take you from `/hero` to `/hero/15` 
this.router.navigate([crisis.id], { relativeTo: this.route }); 

लिंक पैरामीटर सरणी

एक लिंक पैरामीटर सरणी निम्नलिखित मैं रखती है राउटर नेविगेशन के लिए सामग्री:

• गंतव्य घटक के मार्ग का मार्ग। ['/hero']
• रूट यूआरएल में जाने वाले आवश्यक और वैकल्पिक मार्ग पैरामीटर। ['/hero', hero.id] या ['/hero', { id: hero.id, foo: baa }]

निर्देशिका की तरह वाक्यविन्यास

रूटर एक लिंक पैरामीटर सूची गाइड मार्ग नाम देखने में मदद करने के में निर्देशिका की तरह वाक्य रचना का समर्थन करता है:

./ या कोई अग्रणी स्लैश के सापेक्ष है वर्तमान स्तर

../ मार्ग पथ में एक स्तर तक जाने के लिए।

आप एक पूर्वजों पथ के साथ सापेक्ष नेविगेशन वाक्यविन्यास को जोड़ सकते हैं। यदि आपको एक भाई मार्ग पर नेविगेट करना है, तो आप ../<sibling> सम्मेलन का उपयोग एक स्तर तक जाने के लिए कर सकते हैं, फिर भाई मार्ग पथ से ऊपर और नीचे।

रिश्तेदार Nagivation

बारे में महत्वपूर्ण सूचनाएं Router.navigate विधि के साथ एक रिश्तेदार पथ नेविगेट करने के लिए, आप जहाँ आप वर्तमान मार्ग पेड़ में हैं रूटर ज्ञान देने के लिए ActivatedRoute आपूर्ति करनी होगी।

लिंक पैरामीटर सरणी के बाद, संपत्ति ActivatedRoute पर सेट करें। राउटर तब सक्रिय रूट के स्थान के आधार पर लक्षित यूआरएल की गणना करता है।

आधिकारिक Angular Router Documentation

Answer 2

आप

this.router.parent.navigate(['/About']); 

का उपयोग करना चाहिए साथ ही मार्ग पथ निर्दिष्ट, आप भी अपने मार्ग के नाम का उल्लेख कर सकते हैं:

{ path:'/About', name: 'About', ... } 

this.router.parent.navigate(['About']); 

Answer 3

इसके अलावा parent

बिना उपयोग कर सकते हैं का कहना है कि जैसे रूटर परिभाषा :

{path:'/about', name: 'About', component: AboutComponent} 

तो name बजाय path

goToAboutPage() { 
    this.router.navigate(['About']); // here "About" is name not path 
} 

v2.0 नाम संपत्ति से v2.3.0

के लिए अपडेट किया गया रूटिंग में से नेविगेट और नहीं रह सकता है। मार्ग नाम संपत्ति के बिना परिभाषित करें। तो आपको पथ नाम के बजाय पथ का उपयोग करना चाहिए। this.router.navigate(['/path']) और कोई अग्रणी पथ के लिए स्लेश तो जैसे path: '/about'

रूटर परिभाषा के बजाय path: 'about' का उपयोग करें:

{path:'about', component: AboutComponent} 

तो path

goToAboutPage() { 
    this.router.navigate(['/about']); // here "About" is path 
}