वर्तमान मार्ग कैसे प्राप्त करें

Question

वर्तमान डॉक्स केवल रूट परमिशन प्राप्त करने की बात करते हैं, वास्तविक रूट सेगमेंट की नहीं।

उदाहरण के लिए, यदि मैं वर्तमान मार्ग के जनक को खोजना चाहता हूं, तो यह कैसे संभव है?

Comments

window.location.pathname

— dchacke

@dchacke के साथ समस्या window.locationयह है कि यदि भविष्य में, वे सर्वर-साइड रेंडरिंग को लागू करना चाहते हैं, तो वे कुछ कठिनाइयों का सामना करेंगे क्योंकि windowNode.js सर्वर पर मौजूद नहीं है, लेकिन उन्हें मार्ग तक पहुंचने के लिए कोणीय मानक विधियों का उपयोग करने की आवश्यकता है और वे सर्वर और ब्राउज़र दोनों पर ठीक रहेंगे।

— मोहम्मद करमानी

हाँ, समझ में आता है। सर्वर-साइड रेंडरिंग का उपयोग करने वाले या योजना बनाने वालों को इसे ध्यान में रखना चाहिए।

— dchacke

Answer 1

नए V3 राउटर में एक url प्रॉपर्टी है।

this.router.url === '/login'

Comments

मैं इस कोड का उपयोग करता हूं और मुझे यह url स्ट्रिंग चर में मिल रहा है, लेकिन जब मैं कंसोल में प्रिंट करने का प्रयास करता हूं। इसे प्रिंट नहीं कर रहा है। pufUrl = this.router.url कंसोल.log (this.fullUrl); // नहीं मुद्रण

— विजा गुप्ता

<a routerLink="/dashboard" routerLinkActive="active"> डैशबोर्ड नई रूटर सक्रिय सुविधा का उपयोग कर में देखो </a>

— Victor96

यह बेकार है जब आप हैश रणनीति के साथ नेविगेट कर रहे हैं, तो url हमेशा "/" है

— निंजा कोडिंग

@ निंजाकोडिंग मैं हैश रणनीति का उपयोग कर रहा हूं और मुझे बस "/" मिल रहा है। मैं हाश के साथ रूट यूआरएल कैसे प्राप्त कर सकता हूं?

— मुर्तुज़ा

@ मुर्तुजा यहां एक समाधान है this.router.events.filter((event: any) => event instanceof NavigationEnd).subscribe(event => { console.log('this is what your looking for ', event.url); });:। सुनिश्चित करें कि आप आयात करते हैंimport { Router, NavigationEnd } from '@angular/router';

— जेल

Answer 2

कोणीय RC4:

Routerसे आयात कर सकते हैं@angular/router

फिर इसे इंजेक्ट करें:

constructor(private router: Router ) {

}

फिर इसे URL पैरामीटर कहें:

console.log(this.router.url); //  /routename

Comments

राउटर को कैसे आयात किया जाए, इसके बारे में अतिरिक्त स्पष्टता बहुत मददगार है। यदि आप कस्टम राउटर का उपयोग कर रहे हैं तो क्या आप स्पष्ट कर सकते हैं कि यह अलग होगा?

— kbpontius

यह निश्चित रूप से कस्टम रूटर के 'कस्टम-नेस' पर निर्भर करेगा। (खेद है कि यह एक विशेष रूप से उपयोगी टिप्पणी नहीं थी - यदि आपके पास कोई विशिष्ट प्रश्न है, तो मैं एक नया प्रश्न बनाने और इस उत्तर को संदर्भित करने का सुझाव दूंगा)

— लोकार्पल

मैंने इस समाधान का उपयोग किया, लेकिन मुझे हमेशा यह "/" मिलता है। क्या किसी को पता है क्यों?

— एम।

कोणीय निर्भरता इंजेक्शन टाइपस्क्रिप्ट शुगर सिंटैक्स पर निर्भर करता है, इसलिए जब आप निजी _router की घोषणा करते हैं: निर्माता हस्ताक्षर में राउटर, एक संपत्ति _router स्वचालित रूप से राउटर इंजेक्ट के साथ वर्तमान वर्ग के उदाहरण में बनाया जाता है। यह कथन यह है। मेरे लिए सिर्फ एक उपरि है, जैसा कि आप एक ही वस्तु उदाहरण (उस स्थिति में, राउटर) के लिए दो संदर्भ होंगे।

— एंड्रयू रीबॉर्न

@Marcio एम। यह हो सकता है क्योंकि राउटर वास्तव में उस स्थिति में नहीं पहुंचा है, भले ही URL अलग-अलग दिखाता हो। उदाहरण के लिए, यदि आपका गार्ड सेवा में राउटर को देखता है। location.path () जैसा कि उत्तर में बताया गया है कि आपको url मिलेगा, चाहे राउटर स्टेट कोई भी हो।

— डैनियल वैन नीकेर

Answer 3

इंजेक्षन Locationअपने घटक के लिए और पढ़ location.path(); आप जोड़ने की जरूरत है ROUTER_DIRECTIVESकहीं न कहीं तो कोणीय कर सकते हैं संकल्प Location। आपको import: [RouterModule]मॉड्यूल में जोड़ने की आवश्यकता है ।

अपडेट करें

V3 (RC.3) राउटर में आप ActivatedRouteइसकी snapshotसंपत्ति का उपयोग करके अधिक विवरणों को इंजेक्ट और एक्सेस कर सकते हैं।

constructor(private route:ActivatedRoute) {
  console.log(route);
}

या

constructor(private router:Router) {
  router.events.subscribe(...);
}

कोणीय 2 राउटर ईवेंट श्रोता भी देखें

Comments

वह मुझे 'url' पथ देता है। मुझे 'मार्ग के नाम' कैसे मिलते हैं, इसलिए मैं उन्हें एक सरणी में पास कर सकता हूं, navigateसाथ ही बाल मार्ग के नाम (जोड़ा) के साथ मैं नेविगेट करना चाहता हूं।

— pdeva

समझा। मुझे भी यह संतोषजनक नहीं लगता। मैंने खुद इसकी कोशिश नहीं की है, लेकिन हो सकता है MyTrackingServiceकि stackoverflow.com/a/34548656/217408 में समझाया गया हो, जो इन मूल्यों को एक्सेस करने की अनुमति देगा।

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

रूट के नाम अब गए हैं।

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

@GunterZochbauer सक्रिय होने से पहले अनुरोधित मार्ग प्राप्त करने का एक तरीका है ? उदाहरण के लिए, यदि मैं किसी विधि के अंदर अनुरोधित मार्ग को संग्रहीत करना चाहता हूं , ताकि मैं "लॉगिन" पृष्ठ पर पुनर्निर्देशित कर सकूं, और फिर उपयोगकर्ता प्रमाणीकरण के बाद मूल मार्ग पर वापस अनुप्रेषित कर सकूं? canActivate()

— येवगेनी एनानिन

क्या आप ऐसा नहीं कर सकते हैं जो एक कैंटनेट गार्ड के साथ कर सकता है?

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

Answer 4

नए राउटर के लिए = = RC.3

सबसे अच्छा और ऐसा करने का एक सरल तरीका है!

import { Router } from '@angular/router';
constructor(router: Router) { 
      router.events.subscribe((url:any) => console.log(url));
      console.log(router.url);  // to print only path eg:"/login"
}

Comments

यह उत्तर लोस्क्रेलर से कैसे भिन्न है?

— not2savvy

@ not2savvy ने राउटर इवेंट श्रोता के माध्यम से पता लगाने का एक और तरीका दिया था, जिससे कुछ लोगों को यह पता लगाने में मदद मिली कि वे क्या ढूंढ रहे हैं।

— राजनाथ एमएस

Answer 5

इसे इस्तेमाल करो

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

constructor(private router: Router) {
    router.events.filter(event => event instanceof NavigationEnd)
        .subscribe(event => {
            console.log(event);
        });
}

और main.tsआयात में

import 'rxjs/add/operator/filter';

संपादित करें

आधुनिक तरीका है

import {filter} from 'rxjs/operators';

router.events.pipe(
    filter(event => event instanceof NavigationEnd)
)
    .subscribe(event => {
        console.log(event);
    });

Comments

क्या यह वास्तव में अनुशंसित तरीका है कि वर्तमान URL इंगित कर रहा है जहां जाँच करने के लिए कुछ सरल है? मैं इस पर आपके खिलाफ बहस नहीं कर रहा हूं। हालाँकि, मैंने देखा कि राउटिंग चीज़ कई बदलावों, अपडेट्स, भ्रमों आदि का एक स्रोत है। मैं उम्मीद कर रहा था कि मुख्य रूप से इसके लिए ActivatedRoute का उपयोग किया जाएगा, न कि राउटर का । क्या मुझे इस मुद्दे की जटिलता याद आ रही है, शायद?

— गधाबनाणा

मैं जिक्र कर रहा हूं आधिकारिक डॉक्स में ActivatedRoute की ।

— गधाबाना

कम से कम यहां किसी की आवश्यकता नहीं है, राउटर "राउटरइवेंट" प्रकार का निर्यात करता है जो कि अन्य राउटर घटनाओं द्वारा बढ़ाया जाता है - कोणीय.io / api/ router/ RouterEvent

— chrismarx

@chrismarx फिक्स्ड

— व्लाद

@DonkeyBanana वास्तव में, यदि आप नेस्टेड मॉड्यूल के साथ काम कर रहे हैं जिसमें अपने स्वयं के मार्ग शामिल हैं, तो हाँ। वास्तव में, नेस्टेड मॉड्यूल और राउटर का उपयोग करना (जो कि कोणीय टीम भी सिफारिश करती है) यह वर्तमान मार्ग का वास्तविक URL प्राप्त करने का एकमात्र तरीका है, अन्य सभी तरीके बस वापस आ जाएंगे /।

— एगरस्टॉल्फ

Answer 6

उन लोगों के लिए जो अभी भी इसके लिए देख रहे हैं। कोणीय 2.x पर इसे करने के कुछ तरीके हैं।

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

   // string path from root to current route. i.e /Root/CurrentRoute
   router.url 

    // just the fragment of the current route. i.e. CurrentRoute
   activatedRoute.url.value[0].path

    // same as above with urlSegment[]
   activatedRoute.url.subscribe((url: urlSegment[])=> console.log(url[0].path))

   // same as above
   activatedRoute.snapshot.url[0].path

   // the url fragment from the parent route i.e. Root
   // since the parent is an ActivatedRoute object, you can get the same using 
   activatedRoute.parent.url.value[0].path
}

संदर्भ:

1. https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html
2. https://angular.io/docs/ts/latest/api/router/index/Router-class.html
3. https://angular.io/docs/ts/latest/guide/router.html

Answer 7

मार्ग खंड प्राप्त करने के लिए:

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

constructor( route: ActivatedRoute) {}

getRoutes() { const segments: UrlSegment[] = this.route.snapshot.url; }

Answer 8

आप के साथ कोशिश कर सकते हैं

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

constructor(private router: Router, private activatedRoute:ActivatedRoute) {
console.log(activatedRoute.snapshot.url)  // array of states
console.log(activatedRoute.snapshot.url[0].path) }

वैकल्पिक तरीके

router.location.path();   this works only in browser console. 

window.location.pathname जो मार्ग का नाम देता है।

Comments

अद्यतन: activeRoute.snapshot.url अब एक अवलोकन योग्य है और आपको इसकी सदस्यता लेनी होगी।

— सदोक मंदिर

Answer 9

मज़बूती से पूर्ण वर्तमान मार्ग प्राप्त करने के लिए आप इसका उपयोग कर सकते हैं

this.router.events.subscribe(
  (event: any) => {
    if (event instanceof NavigationEnd) {
      console.log('this.router.url', this.router.url);
    }
  }
);

Answer 10

देशी windowवस्तु ठीक काम करती है

console.log('URL:' + window.location.href);
console.log('Path:' + window.location.pathname);
console.log('Host:' + window.location.host);
console.log('Hostname:' + window.location.hostname);
console.log('Origin:' + window.location.origin);
console.log('Port:' + window.location.port);
console.log('Search String:' + window.location.search);

ध्यान दें: इस सर्वर की मरम्मत में इस का उपयोग न करें

Comments

यदि आप सर्वर साइड रेंडरिंग का उपयोग कर रहे हैं तो सावधान रहें, यह टूट जाएगा।

— जेसन फोगलिया

Answer 11

लघु संस्करण यदि आपके पास राउटर आयातित है तो आप बस किसी चीज़ का उपयोग कर सकते हैं

this.router.url === "/ खोज"

और निम्नलिखित करें

1) राउटर आयात करें

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

2) कंस्ट्रक्टर में इसकी प्रविष्टि घोषित करें

constructor(private router: Router) { }

3) अपने फ़ंक्शन में इसके मूल्य का उपयोग करें

yourFunction(){
    if(this.router.url === "/search"){
        //some logic
    }
}

@victor जवाब ने मेरी मदद की, यह उसके जैसा ही जवाब है लेकिन थोड़ा विस्तार के साथ, क्योंकि यह किसी की मदद कर सकता है

Answer 12

import { Router } from '@angular/router';
constructor(router: Router) { 
      console.log(router.routerState.snapshot.url);
}

Answer 13

Angular2 Rc1 में आप रूटसेगमेंट को इंजेक्ट कर सकते हैं और उन्हें नेवीगेट विधि में पास कर सकते हैं।

constructor(private router:Router,private segment:RouteSegment) {}

  ngOnInit() {
    this.router.navigate(["explore"],this.segment)
  }

Answer 14

कोणीय 2.2.1 के साथ (एक कोणीय 2-वेबपैक-स्टार्टर आधारित परियोजना में) यह काम करता है:

export class AppComponent {
  subscription: Subscription;
  activeUrl: string;

  constructor(public appState: AppState,
              private router: Router) {
    console.log('[app] constructor AppComponent');
  }

  ngOnInit() {
    console.log('[app] ngOnInit');
    let _this = this;
    this.subscription = this.router.events.subscribe(function (s) {
      if (s instanceof NavigationEnd) {
        _this.activeUrl = s.urlAfterRedirects;
      }
    });
  }

  ngOnDestroy() {
    console.log('[app] ngOnDestroy: ');
    this.subscription.unsubscribe();
  }
}

AppComponent के टेम्प्लेट में आप {{activeUrl}} का उपयोग कर सकते हैं।

यह समाधान RouterLinkActive के कोड से प्रेरित है।

Comments

यह एक अच्छा उत्तर है b / c यदि आपके पास एक वाइल्ड कार्ड रूट है जो वापस / होम ईवेंट पर रीडायरेक्ट करता है ।url / होम रूट से मेल खाने के लिए पर्याप्त नहीं है यह वास्तव में उस रूट को दिखाएगा जो मौजूद नहीं है। event.urlAfterRedirects वास्तविक अंत मार्ग मुद्रित करेगा। Ty।

— इयान पोस्टन फ्रमर

Answer 15

कोणीय 2 आरसी 2

router.urlTree.contains(router.createUrlTree(['/home']))

Answer 16

यहाँ वह है जो मेरे लिए कोणीय 2.3.1 में काम कर रहा है।

location: any;

constructor(private _router: Router) { 

      _router.events.subscribe((data:any) => { this.location = data.url; });

      console.warn(this.location);  // This should print only path e.g. "/home"
}

dataएक वस्तु है और हम की जरूरत है urlसंपत्ति है कि वस्तु में निहित। तो हम एक वैरिएबल में उस वैल्यू को कैप्चर करते हैं और हम उस वैरिएबल को अपने HTML पेज में भी इस्तेमाल कर सकते हैं। उदाहरण के लिए, मैं केवल एक div दिखाना चाहता हूं जब उपयोगकर्ता होम पेज पर हो। इस स्थिति में, मेरा राउटर यूआरएल मान होगा/home । तो मैं निम्नलिखित तरीके से एक div लिख सकता हूं:

<div *ngIf="location == '/home'">
This is content for the home page.
</div>

Answer 17

मैं एक ही समस्या का उपयोग कर रहा था

this.router.url

मुझे क्वेरी परम के साथ वर्तमान मार्ग मिलता है। इसके बजाय मैं इसका उपयोग कर रहा था:

this.router.url.split('?')[0]

वास्तव में अच्छा समाधान नहीं है, लेकिन मददगार है।

Answer 18

आप ActivatedRouteवर्तमान राउटर प्राप्त करने के लिए उपयोग कर सकते हैं

मूल उत्तर (RC संस्करण के लिए)

मुझे AngularJS Google समूह पर एक समाधान मिला और यह इतना आसान है!

ngOnInit() {
  this.router.subscribe((url) => console.log(url));
}

यहाँ मूल जवाब है

https://groups.google.com/d/msg/angular/wn1h0JPrF48/zl1sHJxbCQAJ

Comments

को rc.2 के रूप में बदल दिया गया है, क्योंकि urlअब URL और स्ट्रिंग नहीं है, लेकिन a ComponentInstruction।

— मार्टिन सी।

Answer 19

WAY 1 : कोणीय का उपयोग करते हुए: this.router.url

import { Component } from '@angular/core';

// Step 1: import the router 
import { Router } from '@angular/router';

@Component({
    template: 'The href is: {{href}}'
    /*
    Other component settings
    */
})
export class Component {
    public href: string = "";

    //Step 2: Declare the same in the constructure.
    constructor(private router: Router) {}

    ngOnInit() {
        this.href = this.router.url;
        // Do comparision here.....
        ///////////////////////////
        console.log(this.router.url);
    }
}

WAY 2 Window.location जैसा कि हम जावास्क्रिप्ट में करते हैं, यदि आप राउटर का उपयोग नहीं करना चाहते हैं

this.href= window.location.href;

Answer 20

अपने उद्देश्यों के लिए आप उपयोग कर सकते हैं this.activatedRoute.pathFromRoot।

import {ActivatedRoute} from "@angular/router";
constructor(public activatedRoute: ActivatedRoute){

}

PathFromRoot की मदद से आप मूल यूआरएल की सूची प्राप्त कर सकते हैं और जांच सकते हैं कि URL का आवश्यक हिस्सा आपकी स्थिति से मेल खाता है या नहीं।

अतिरिक्त जानकारी के लिए कृपया इस लेख की जाँच करें http://blog.2muchcfish.com/getting-current-state-in-angular2-router/ या npm से ng2-router-helper स्थापित करें

npm install ng2-router-helper

Answer 21

वर्तमान मार्ग के माता-पिता को खोजने के लिए, आप UrlTreeसंबंधित मार्गों का उपयोग करते हुए, राउटर से प्राप्त कर सकते हैं:

var tree:UrlTree = router.createUrlTree(['../'], {relativeTo: route});

फिर प्राथमिक आउटलेट के खंडों को प्राप्त करने के लिए:

tree.root.children[PRIMARY_OUTLET].segments;

Answer 22

अब, मैं अपना रास्ता निम्नानुसार पा रहा हूँ -

this.router.url.subscribe(value => {
    // you may print value to see the actual object
    // console.log(JSON.stringify(value));
    this.isPreview = value[0].path === 'preview';
})

कहां, routerका एक उदाहरण हैActivatedRoute

Answer 23

router.events.subscribe(e => {
      if (e instanceof NavigationEnd) {
        this.currentUrl = e.url;
      }
    });

Answer 24

import { Router, NavigationEnd } from "@angular/router";

constructor(private router: Router) {
  // Detect current route
  router.events.subscribe(val => {
    if (val instanceof NavigationEnd) {
      console.log(val.url);
    }
});

Answer 25

यह सरल है, कोणीय 2 में आपको केवल राउटर लाइब्रेरी को इस तरह आयात करना होगा:

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

फिर घटक या सेवा के निर्माण में आपको इसे इस तरह से बदलना होगा:

constructor(private _router: Router) {}

फिर कोड के किसी भी हिस्से में, फ़ंक्शन में, विधि, निर्माण, जो भी:

      this._router.events
        .subscribe(
            (url:any) => {
                let _ruta = "";
                url.url.split("/").forEach(element => {
                    if(element!=="" && _ruta==="")
                        _ruta="/"+element;  
                });
                console.log("route: "+_ruta); //<<<---- Root path
                console.log("to URL:"+url.url); //<<<---- Destination URL                    
                console.log("from URL:"+this._router.url);//<<<---- Current URL
            }); 

Answer 26

आप .ts फ़ाइल में उपयोग कर सकते हैं

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

constructor(private router: Router) {}

this.router.events.subscribe(value => {
      if (value instanceof NavigationStart) {
        console.log(value) // your current route
      }
    });

Answer 27

यह आपका उत्तर हो सकता है, URL / मार्ग से पैरामीटर प्राप्त करने के लिए सक्रिय मार्ग के पैरामेट्स विधि का उपयोग करें जिसे आप पढ़ना चाहते हैं, नीचे डेमो चिपसेट है

import {ActivatedRoute} from '@angular/router'; 
@Component({
})
export class Test{
constructor(private route: ActivatedRoute){
this.route.params.subscribe(params => {
             this.yourVariable = params['required_param_name'];
        });
    }
}

Answer 28

this.router.events.subscribe((val) => {
   const currentPage = this.router.url; // Current page route
  const currentLocation = (this.platformLocation as any).location.href; // Current page url
});

Answer 29

यदि आपको वर्तमान url तक पहुंचने की आवश्यकता है, तो आमतौर पर आपको कुछ करने के लिए NavigationEnd या NavigationStart की प्रतीक्षा करनी होगी। यदि आप सिर्फ राउटर ईवेंट की सदस्यता लेते हैं, तो रुट जीवनचक्र में कई ईवेंट को सब्सक्राइब करेगा। इसके बजाय, केवल आपके द्वारा आवश्यक ईवेंट के लिए फ़िल्टर करने के लिए RxJS ऑपरेटर का उपयोग करें। इसका लाभकारी साइड इफेक्ट अब हम सख्त प्रकार के हैं!

constructor(private router: Router) {
    router.events.pipe(
      filter(ev => (ev instanceof NavigationEnd))
    ).subscribe((ev: NavigationEnd) => {
      console.log(ev.url);
    });
}

Answer 30

मैं उस समस्या का सामना कर रहा था जहां मुझे URL पथ की आवश्यकता थी जब उपयोगकर्ता ऐप के माध्यम से नेविगेट कर रहा हो या URL के आधार पर बाल घटकों को प्रदर्शित करने के लिए URL (या किसी विशिष्ट URL पर रीफ़्रेश) पर पहुंच रहा हो ।

अधिक, मुझे एक ऑब्जर्वेबल चाहिए जो टेम्पलेट में भस्म हो सकता है, इसलिए रूटर । ऑरल एक विकल्प नहीं था। न ही राउटर.वियर्स सब्सक्रिप्शन क्योंकि घटक के टेम्पलेट को इनिशियलाइज़ किए जाने से पहले रूटिंग को निकाल दिया जाता है।

this.currentRouteURL$ = this.router.events.pipe(
     startWith(this.router),
     filter(
         (event) => event instanceof NavigationEnd || event instanceof Router
     ),
     map((event: NavigationEnd | Router) => event.url)
);

आशा है कि यह मदद करता है, सौभाग्य!

Comments

यह कमाल का है।

— कोडेपिक