कोणीय 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('[e-mail]', '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');

       });
   }
 }

Comments

इसके अलावा, मैंने अपने app.ts फ़ाइल में रूट कॉन्फिगरेशन सेट किया है जैसे: @RouteConfig ([{path: '/', redirectTo: '/ home'}, {path: '/ home', Components: Todo, as : 'Home'}, {path: '/ about', कंपोनेंट: About, as: 'About'}])

— AngularM

आपको /अपने रास्तों को निकालना चाहिए क्योंकि यह आवश्यक नहीं है

— mast3rd3mon

Answer 1

निरपेक्ष मार्ग मार्ग

नेविगेशन के लिए 2 विधियाँ हैं, .navigate() और.navigateByUrl()

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

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

constructor(private router: Router) {}

navigateToLogin() {
   this.router.navigateByUrl('/login');
}

जिस घटक को आप नेविगेट करना चाहते हैं, उसके URL में आप निरपेक्ष पथ डालते हैं।

नोट: राउटर की 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']
• आवश्यक और वैकल्पिक मार्ग पैरामीटर जो रूट URL में जाते हैं। ['/hero', hero.id]या['/hero', { id: hero.id, foo: baa }]

निर्देशिका जैसी वाक्य रचना

राउटर मार्ग का नाम देखने में मदद करने के लिए लिंक पैरामीटर्स लिस्ट में डायरेक्टरी जैसे सिंटैक्स का समर्थन करता है:

./ या कोई भी प्रमुख स्लैश वर्तमान स्तर के सापेक्ष नहीं है।

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

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

रिश्तेदार संज्ञा के बारे में महत्वपूर्ण नोट्स

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

लिंक पैरामीटर एरे के बाद, किसी ऑब्जेक्ट को relativeToसेट की गई प्रॉपर्टी के साथ जोड़ें ActivatedRoute। राउटर तब सक्रिय मार्ग के स्थान के आधार पर लक्ष्य URL की गणना करता है।

आधिकारिक कोणीय राउटर प्रलेखन से

Comments

ध्यान रखें यदि आपके पास बच्चे मार्ग हैं: { path: 'home', component: Home, children: homeRoutes }तो आप उसे राउटर विधि प्रदान करना चाहते हैं: this.router.navigate(['home/address-search'])याthis.router.navigateByUrl(/'home/address-search')

— डैनियल राम

यहां तक ​​कि यह एक अच्छा जवाब है, यह नोटिस करना महत्वपूर्ण है कि this.router= Router;कुछ पाठकों को भ्रमित कर सकता है, इस मामले में राउटर के एक निर्भरता इंजेक्शन का उल्लेख है, जिसे मुझे इस कोड का उपयोग करके बनाया जाना चाहिए constructor( private router: Router )

— सिद्धार्थ

@ सिध्दार्थ ने टिप के लिए धन्यवाद, मैंने ध्यान नहीं दिया कि जब तक आपने इसे इंगित नहीं किया था। मैंने मूल रूप से इसे जल्दी से लिखा होगा और इसे बाद में अपडेट करने का इरादा था लेकिन भूल गया। अब उचित निर्भरता इंजेक्शन का उपयोग करने के लिए उदाहरण को अपडेट किया गया है।

— तेतरादेव

@TetraDev और कहाँ से आया "this.route": डी, ​​इसे उर निर्भरता में जोड़ें

— Noob

Answer 2

आपको उपयोग करना चाहिए

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

मार्ग पथ निर्दिष्ट करने के साथ-साथ, आप अपने मार्ग का नाम भी निर्दिष्ट कर सकते हैं:

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

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

Comments

नमस्ते, जब मैं करता हूं कि मुझे अपने टाइपस्क्रिप्ट कंपाइलर में यह त्रुटि संदेश मिलता है: "टाइप 'स्ट्रिंग' का तर्क किसी भी प्रकार के पैरामीटर के लिए लागू नहीं होता है [, संपत्ति धक्का टाइप स्ट्रिंग में गायब है"

— AngularM

मैंने यह कोशिश की और यह काम नहीं किया: this.router.parent.navigate ('[[के बारे में]');

— AngularM

आपको इस सिंटैक्स का उपयोग करना चाहिए: this.router.parent.navigate (['/ About']); आपको ऐरे को पास करना है ['/ About'] not string '[/ About]'

— Luca

राउटर 3 बीटा उपयोग के लिएthis._router.navigate(['/some-route']);

— एड्रियन मोइसा

Answer 3

के बिना भी उपयोग कर सकते हैं parent

राऊटर परिभाषा जैसे:

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

तब के nameबजाय द्वारा नेविगेट कर सकते हैंpath

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

V2.3.0 के लिए अपडेट किया गया

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

राउटर परिभाषा जैसे:

{path:'about', component: AboutComponent}

तब तक नेविगेट कर सकते हैं path

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

Comments

nameकोणीय 2.0 में रूट प्रकार पर पदावनत किया गया है।

— रेनॉर्न

कोणीय 2 में के बजाय प्रयोग की जाने वाली करेगा । अधिक जानकारी के लिए -> angular.io/docs/ts/latest/guide/router.htmlv2.3.0dataname

— WildDev

Answer 4

import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');

Comments

हालांकि यह कोड स्निपेट समाधान हो सकता है, जिसमें स्पष्टीकरण भी शामिल है , जो आपके पोस्ट की गुणवत्ता को बेहतर बनाने में मदद करता है। याद रखें कि आप भविष्य में पाठकों के लिए प्रश्न का उत्तर दे रहे हैं, और उन लोगों को आपके कोड सुझाव के कारणों का पता नहीं चल सकता है।

— एडम किपनीस

Answer 5

व्यक्तिगत रूप से, मैंने पाया कि, जब से हम एक ngRoutesसंग्रह (लंबी कहानी) बनाए रखते हैं, तो मुझे सबसे अधिक आनंद मिलता है:

GOTO(ri) {
    this.router.navigate(this.ngRoutes[ri]);
}

मैं वास्तव में इसे हमारे एक साक्षात्कार प्रश्न के हिस्से के रूप में उपयोग करता हूं। इस तरह, मैं उस समय के करीब-करीब पढ़ सकता हूं, जो हमेशा देखते हुए विकसित हो रहा है कि जब वे GOTO(1)मुखपृष्ठ पुनर्निर्देशन के लिए दौड़ते हैं, तो वे किसको घुमाते हैं ।