मैं बाल मार्ग से मूल मार्ग पर कैसे जाऊँ?

Question

मेरी समस्या काफी क्लासिक है। मेरे पास एक एप्लिकेशन का एक निजी हिस्सा है जो एक के पीछे है login form। जब लॉगिन सफल होता है, तो यह एडमिन एप्लिकेशन के लिए एक चाइल्ड रूट पर जाता है।

मेरी समस्या यह है कि मैं उपयोग नहीं कर सकता global navigation menuक्योंकि राउटर मेरे AdminComponentबजाय मेरे मार्ग में रूट करने का प्रयास करता है AppCompoment। तो मेरा नेविगेशन टूट गया है।

एक और समस्या यह है कि अगर कोई सीधे URL तक पहुंचना चाहता है, तो मैं मूल "लॉगिन" मार्ग पर पुनर्निर्देशित करना चाहता हूं। लेकिन मैं यह काम नहीं कर सकता। मुझे ऐसा लगता है जैसे थिस दो मुद्दे समान हैं।

किसी भी विचार यह कैसे किया जा सकता है?

Comments

कृपया कुछ कोड जोड़ें

— जियांग वाईडी

Answer 1

क्या आप एक लिंक / HTML चाहते हैं या क्या आप अनिवार्य रूप से / कोड में रूट करना चाहते हैं?

लिंक : राउटरलिंक निर्देश हमेशा दिए गए लिंक को वर्तमान URL के डेल्टा के रूप में मानता है:

[routerLink]="['/absolute']"
[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"     // or
[routerLink]="['child']" 

// with route param     ../../parent;abc=xyz
[routerLink]="['../../parent', {abc: 'xyz'}]"
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
[routerLink]="['../../parent']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"

राउटरलिंक के साथ, directivesसरणी को आयात और उपयोग करना याद रखें :

import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
    directives: [ROUTER_DIRECTIVES],

इम्पीरेटिव : navigate()विधि को एक प्रारंभिक बिंदु (यानी, relativeToपैरामीटर) की आवश्यकता होती है । यदि कोई नहीं दिया गया है, तो नेविगेशन निरपेक्ष है:

import { Router, ActivatedRoute } from '@angular/router';
...
constructor(private router: Router, private route: ActivatedRoute) {}
...
this.router.navigate(["/absolute/path"]);
this.router.navigate(["../../parent"], {relativeTo: this.route});
this.router.navigate(["../sibling"],   {relativeTo: this.route});
this.router.navigate(["./child"],      {relativeTo: this.route}); // or
this.router.navigate(["child"],        {relativeTo: this.route});

// with route param     ../../parent;abc=xyz
this.router.navigate(["../../parent", {abc: 'xyz'}], {relativeTo: this.route});
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
this.router.navigate(["../../parent"], {relativeTo: this.route, 
    queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'});

// navigate without updating the URL 
this.router.navigate(["../../parent"], {relativeTo: this.route, skipLocationChange: true});

Comments

router.navigate(string)विधि कोणीय के वर्तमान संस्करण (2.2) में मौजूद प्रतीत नहीं होता है। मैंने डॉक्स में खोज की और केवल पाया navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>। या मैं पूरी तरह से कुछ याद कर रहा हूँ?

— टमाटर

@ टोमाटो, आपको मार्गों के चारों ओर [] लगाने की आवश्यकता है। उदाहरण के लिए, इस।

— जिये २

relativeToजब आप HTML में टाइपिंग के बजाय [राऊटरलिंक] का उपयोग कर रहे हैं तो आप डेटा कैसे पास करते हैं ?

— redfox05

सेवाओं के साथ भी ऐसा ही है?

— 8

किसी कारण से, मेरे मामले में मुझे माता-पिता से नेविगेट करने के ../../../बजाय ../( '/users'से '/users/1') का उपयोग करना होगा।

— nelson6e65

Answer 2

यह मेरे लिए स्प्रिंग 2017 के रूप में काम करता है:

goBack(): void {
  this.router.navigate(['../'], { relativeTo: this.route });
}

जहां आपका घटक ctor स्वीकार करता है ActivatedRouteऔर Routerनिम्नानुसार आयात किया जाता है:

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

Comments

एक तारीख के बजाय यह आपके द्वारा उपयोग किए जाने वाले कोणीय संस्करण का उल्लेख करने के लिए अधिक उपयोगी होगा।

— इशरवुड

@isherwood मैं सहमत हूँ। क्षमा याचना। अगर मुझे सही से याद है, तो मैंने इसे Angular 4.0.x के लिए लिखा था और यह 4.3.x में अभी भी कार्यात्मक था। दुर्भाग्य से मैं अब कोणीय से दूर चला गया,

— ne1410s

@ ne1410s बहुत बहुत धन्यवाद रिश्तेदार गायब था: this.route

— इयान सैम

नोट: आलसी लोड किए गए मॉड्यूल पर अतिरिक्त राउटर सेगमेंट के साथ काम नहीं करेगा। EX:: parentPath'काम: कतार' (जिसमें बच्चे हैं) और कहा कि बच्चे मापदंडों के साथ बाल मॉड्यूल लोड करते हैं। fullCurrentPath: 'काम / शिपिंग / मॉड्यूल / सूची'। उपरोक्त कोड parentPathसे लोड नहीं किया जा सकता है fullCurrentPath।

— डॉन थॉमस बॉयल

Answer 3

आप अपने मूल रूट पर इस तरह से नेविगेट कर सकते हैं

this.router.navigate(['.'], { relativeTo: this.activeRoute.parent });

आपको कंस्ट्रक्टर में वर्तमान सक्रिय रूट को इंजेक्ट करना होगा

constructor(
    private router: Router,
    private activeRoute: ActivatedRoute) {

  }

Comments

कुछ स्पष्टीकरण जोड़ने से यह उत्तर अधिक उपयोगी होगा।

— सागर ज़ला

बहुत से लोग यह सुझाव देते हैं कि इस के द्वारा sibling पर नेविगेट करें। Theterter.navigate (["../ sibling"], {सापेक्षत: इस:।}}; हालांकि, यह अब काम नहीं कर रहा है। मुझे यह उत्तर कार्य संभवतः मिला। माता-पिता को नेविगेट करने के लिए '../' का उपयोग करने के बजाय। इस से सापेक्ष को बदलें। इस के लिए। सही, सही तरीका है

— टेरी लैम

@ क्रिसलिनमोट: ओह हां मैंने एक गलती की। यह सामान्य स्थिति में काम करता है। हालाँकि, यह सहायक मार्गों में काम नहीं करता है। इसका अर्थ है कि यह .router.navigate (['../ सिबलिंग') काम कर रहा है, लेकिन यह नहीं है। क्वेटर.नवेट ([{आउटलेट: {'सेकंडरी': ['../sibling']}}])। सहायक राउटिंग में, मुझे इस का उपयोग करना है। क्वेटर.नवेट ([{आउटलेट्स: {'सेकेंडरी': ['सिबलिंग']}}], {सापेक्ष: this.activatedRoute.parent})।

— टेरी लैम

इसके अलावा, इस उत्तर से नेविगेशन विधि this.router.navigate(['.'], {relativeTo: this.activeRoute.parent});एक मामले में सही ढंग से काम करेगी, जब आप एक ही घटक को दो रास्तों में उपयोग करते हैं: / उपयोगकर्ता / बनाने और / उपयोगकर्ता / संपादित / 123। दोनों मामलों में यह माता-पिता / उपयोगकर्ताओं को नेविगेट करेगा। के साथ नियमित नेविगेशन this.router.navigate([".."], {relativeTo: this.activeRoute})केवल उपयोगकर्ताओं / बनाने के लिए काम करेगा, लेकिन यह उपयोगकर्ताओं / संपादन / 123 के लिए काम नहीं करेगा क्योंकि यह मौजूदा / उपयोगकर्ताओं / संपादित / मार्ग पर नहीं आएगा।

— रोजानिक

एक विकल्प के लिए +1, लेकिन व्यक्तिगत रूप से, मैं एक बाइट चेज़र का एक बिट हूं और माता-पिता के संदर्भ को खत्म करने के लिए , [".."] पैरामीटर में एक अतिरिक्त डॉट का निवेश करूंगा , {सापेक्षता: this.route} ।

— कोनराड विल्टरस्टन

Answer 4

constructor(private router: Router) {}

navigateOnParent() {
  this.router.navigate(['../some-path-on-parent']);
}

राउटर सपोर्ट करता है

• पूर्ण पथ /xxx- रूट घटक के राउटर पर शुरू हुआ
• सापेक्ष पथ xxx- वर्तमान घटक के राउटर पर शुरू हुआ
• सापेक्ष पथ ../xxx- वर्तमान घटक के मूल राउटर पर शुरू हुआ

Comments

यद्यपि यह कोड इस प्रश्न का उत्तर दे सकता है कि क्यों और / या कैसे का उत्तर देने के संबंध में अतिरिक्त संदर्भ प्रदान करने से इसके दीर्घकालिक मूल्य में काफी सुधार होगा। कृपया कुछ स्पष्टीकरण जोड़ने के लिए अपने उत्तर को संपादित करें।

— टोबी स्पाइट

@TobySpeight मेला काफी मुझे लगता है कि ../अच्छी तरह से जाना जाता है, लेकिन अंत में यह अभी भी अस्पष्ट है। संकेत के लिए धन्यवाद।

— गुंटर ज़ोचबॉयर

उत्तर के लिए धन्यवाद, मैं काफी समय से इस वेबसाइट पर काम कर रहा हूं, इसलिए एंगुलर स्पष्ट रूप से अपडेट किया गया है। मैंने अपने वर्तमान संस्करण में इस समाधान की कोशिश की है और यह काम नहीं करता है। मुझे अपडेट करने दें और मैं बाद में टिप्पणी करूंगा।

— कार्ल बिसवर्ट

मुझे उम्मीद के मुताबिक काम करने के लिए आपका कोड नहीं मिला। हालाँकि, स्पष्ट रूप से जोड़कर , {सापेक्षता: this.route} नेविगेट करने के लिए कॉल में एक दूसरे पैरामीटर के रूप में , यह काम करता है। अगर यह इस तथ्य के लिए नहीं होता कि आपके उत्तरों में सटीकता की चरम सीमा होती है, तो मैं इसे एक बेवकूफ टाइपो तक चाक कर दूँगा। क्या यह उत्तर प्रदान किए जाने के बाद से राउटर के व्यवहार में बदलाव है (3.6 साल पहले, जो कि कोणीय वर्षों में एक अर्ध-अनंत काल की तरह है)?

— कोनराड विल्टर्स्टन

यह एक पुराना उत्तर है और राउटर ने इस समय बहुत कुछ बदल दिया है। मुझे लगता है कि मेरा उत्तर केवल यह देखते हुए पुराना है कि अधिक उत्थान के साथ कई उत्तर हैं। मैं अब इतना वेब यूआई सामान नहीं कर रहा हूं और मेरे सिर के शीर्ष पर सभी विवरण नहीं हैं।

— गुंटर ज़ोचबॉयर

Answer 5

वर्तमान मार्ग या मूल मार्ग में मापदंडों की संख्या की परवाह किए बिना मूल घटक पर नेविगेट करने के लिए : कोणीय 6 अद्यतन 1/21/19

   let routerLink = this._aRoute.parent.snapshot.pathFromRoot
        .map((s) => s.url)
        .reduce((a, e) => {
            //Do NOT add last path!
            if (a.length + e.length !== this._aRoute.parent.snapshot.pathFromRoot.length) {
                return a.concat(e);
            }
            return a;
        })
        .map((s) => s.path);
    this._router.navigate(routerLink);

यह एक पूर्ण मार्ग होने का जोड़ा बोनस है जिसे आप सिंगलटन राउटर के साथ उपयोग कर सकते हैं।

(निश्चित रूप से कोणीय 4+, शायद कोणीय 2 भी।)

Comments

अजीब तरह से, यह हमेशा एक खाली सरणी देता है, और उसी परिणाम को प्राप्त करता है this._router.navigate([]), जबकि this._router.navigate([[]])मूल मार्ग पर ले जाता है, अगर और केवल अगर मूल मार्ग ही नहीं है।

— आशीष झंवर

अद्यतन कोड को कोणीय 6 परिवर्तन और माता-पिता और मार्गों में बच्चों वाले बच्चे के साथ उचित अभिभावक को प्रतिबिंबित करने के लिए।

— डॉन थॉमस बॉयल

क्या आप सुनिश्चित हैं कि यह आपके उपयोग के मामले में कुछ विशिष्ट नहीं है? ऐसा प्रतीत नहीं होता कि अंतिम रास्ता ['ऑर्डर', '123', 'आइटम', 1] को सिर्फ ['ऑर्डर'] में बदल देगा, जो बिल्कुल भी सही नहीं लगता। किसी भी मामले में, हम बस कोणीय 5 से 7 तक गए और इस कोड को स्पर्श नहीं किया।

— कयाजिया

मेरे पृष्ठ पर उनके div की संख्या है .. प्रत्येक div पर क्लिक करें मैं क्वेरी पैरामीटर पास करता हूं और एक घटक लोड करता हूं। अब ब्राउज़र बैक बटन का उपयोग करके मैं वापस कैसे जाना चाहता हूं?

— व्रजेन्द्र सिंह मंडलोई

Answer 6

एक और तरीका इस तरह हो सकता है

this._router.navigateByUrl(this._router.url.substr(0, this._router.url.lastIndexOf('/'))); // go to parent URL

और यहाँ कंस्ट्रक्टर है

constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }

Answer 7

बहुत कुछ के बिना:

this.router.navigate(['..'], {relativeTo: this.activeRoute, skipLocationChange: true});

पैरामीटर '..' नेविगेशन को एक स्तर ऊपर बनाता है, अर्थात माता-पिता :)

Comments

आप SkipLocationChange के उद्देश्य / आवश्यकता का उल्लेख करना चाह सकते हैं ।

— कोनराड विल्टर्स्टन

Answer 8

मेरे मार्गों में इस तरह एक पैटर्न है:

• उपयोगकर्ता / संपादित करें / 1 -> संपादित करें
• उपयोगकर्ता / बनाएँ / 0 -> बनाएँ
• उपयोगकर्ता / -> सूची

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

उस बारे में सोचकर, मैंने "स्तर" पैरामीटर के साथ अपना तरीका बनाया।

goBack(level: number = 1) {
    let commands = '../';
    this.router.navigate([commands.repeat(level)], { relativeTo: this.route });
}

इसलिए, एडिट टू लिस्ट से जाने के लिए मैं उस तरीके को कॉल करता हूं:

this.goBack(2);

Answer 9

यदि आप uiSref निर्देश का उपयोग कर रहे हैं तो आप ऐसा कर सकते हैं

uiSref="^"

Answer 10

मेरा समाधान है:

const urlSplit = this._router.url.split('/');
this._router.navigate([urlSplit.splice(0, urlSplit.length - 1).join('/')], { relativeTo: this._route.parent });

और Routerइंजेक्शन:

private readonly _router: Router

Answer 11

इसमें से किसी ने भी मेरे लिए काम नहीं किया ... मुझे उपयोग करना था:

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

---

private router: Router

---

this.router.navigate([this.router.url.substring(0, this.router.url.lastIndexOf('/'))]);

Comments

कृपया अपने उत्तर को कुछ डिस्क्रिटोन के साथ अपडेट करें कि यह क्यों काम करता है। कृपया उत्तर कैसे देखें ।

— गेराल्ड ज़ेथनर

Answer 12

अपने निर्माता से स्थान जोड़ें @angular/common

constructor(private _location: Location) {}

वापस समारोह जोड़ें:

back() {
  this._location.back();
}

और फिर आपके विचार में:

<button class="btn" (click)="back()">Back</button>

Comments

यह केवल तभी काम करता है जब आप पहले मूल मार्ग में थे। मूल मार्गों का ब्राउज़र इतिहास से कोई लेना-देना नहीं है ...

— लेविथानबर्गर

यह वापस नेविगेट करता है, लेकिन घटक के माता-पिता के लिए नेविगेट नहीं करता है

— एंड्रयू आंद्रीव

इसका उपयोग नहीं किया जाना चाहिए, यदि उपयोगकर्ता किसी बाहरी साइट से घटक पर जाता है, तो उसे उस साइट पर वापस ले जाया जाएगा। यह कोड

— BROWS में BUT