कोणीय में पिछले पृष्ठ का URL कैसे निर्धारित करें?

Question 1

मान लीजिए मैं वर्तमान में उस पृष्ठ पर हूं जिसमें URL है /user/:id। अब इस पृष्ठ से मैं अगले पृष्ठ पर जाता हूं :id/posts।

अब क्या कोई रास्ता है, ताकि मैं जांच कर सकूँ कि पिछला URL क्या है, यानी /user/:id।

नीचे मेरे मार्ग हैं

export const routes: Routes = [
  { 
    path: 'user/:id', component: UserProfileComponent
  },
  {  
    path: ':id/posts', component: UserPostsComponet 
  }
];

Question 2

आप रूट परिवर्तन की सदस्यता ले सकते हैं और वर्तमान घटना को संग्रहीत कर सकते हैं ताकि आप इसका उपयोग अगले होने पर कर सकें

previousUrl: string;
constructor(router: Router) {
  router.events
  .pipe(filter(event => event instanceof NavigationEnd))
  .subscribe((event: NavigationEnd) => {
    console.log('prev:', event.url);
    this.previousUrl = event.url;
  });
}

यह भी देखें कि कोणीय में मार्ग परिवर्तन का पता कैसे लगाएं?

Question 3

शायद अन्य सभी उत्तर कोणीय 2.X के लिए हैं।

अब यह कोणीय 5.X के लिए काम नहीं करता है। मैं इसके साथ काम कर रहा हूं।

केवल नेविगेशनएंड के साथ, आप पिछले url नहीं प्राप्त कर सकते हैं।

क्योंकि राउटर "नेवीगेशनस्टार्ट", "रूटसेक्रिटाइज़्ड", ..., से लेकर "नेवीगेशन" तक काम करता है।

आप के साथ जाँच कर सकते हैं

    router.events.forEach((event) => {
  console.log(event);
});

लेकिन फिर भी आपको "नेविगेशनस्टार्ट" के साथ भी पिछले यूआरएल नहीं मिल सकते हैं।

अब आपको जोड़ीदार का उपयोग करने की आवश्यकता है।

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/pairwise';

constructor(private router: Router) {
  this.router.events
    .filter(e => e instanceof RoutesRecognized)
    .pairwise()
    .subscribe((event: any[]) => {
      console.log(event[0].urlAfterRedirects);
    });
}

जोड़ीदार के साथ, आप देख सकते हैं कि url क्या और किस से है।

"RoutesRecognized" मूल से लक्ष्य यूआरएल के लिए बदलते कदम है।

इसलिए इसे फ़िल्टर करें और इससे पिछले url प्राप्त करें।

अंतिम पर कम नहीं,

इस कोड को मूल घटक या उच्च (उदा। app.component.ts) में डालें

क्योंकि यह कोड खत्म होने के बाद आग लगाता है।

अद्यतन कोणीय 6+

events.filterत्रुटि देता है क्योंकि फिल्टर घटनाओं का हिस्सा नहीं है, इसलिए करने के लिए कोड बदलने

import { filter, pairwise } from 'rxjs/operators';

this.router.events
.pipe(filter((evt: any) => evt instanceof RoutesRecognized), pairwise())
.subscribe((events: RoutesRecognized[]) => {
  console.log('previous url', events[0].urlAfterRedirects);
  console.log('current url', events[1].urlAfterRedirects);
});

Question 4

एक इंजेक्शन सेवा बनाएँ:

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

 /** A router wrapper, adding extra functions. */
@Injectable()
export class RouterExtService {

  private previousUrl: string = undefined;
  private currentUrl: string = undefined;

  constructor(private router : Router) {
    this.currentUrl = this.router.url;
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {        
        this.previousUrl = this.currentUrl;
        this.currentUrl = event.url;
      };
    });
  }

  public getPreviousUrl(){
    return this.previousUrl;
  }    
}

फिर इसे हर जगह आपकी ज़रूरत के लिए इस्तेमाल करें। जितनी जल्दी हो सके वर्तमान चर को स्टोर करने के लिए, AppModule में सेवा का उपयोग करना आवश्यक है।

// AppModule
export class AppModule {
  constructor(private routerExtService: RouterExtService){}

  //...

}

// Using in SomeComponent
export class SomeComponent implements OnInit {

  constructor(private routerExtService: RouterExtService, private location: Location) { } 

  public back(): void {
    this.location.back();
  }

  //Strange name, but it makes sense. Behind the scenes, we are pushing to history the previous url
  public goToPrevious(): void {
    let previous = this.routerExtService.getPreviousUrl();

    if(previous)
      this.routerExtService.router.navigateByUrl(previous);
  }

  //...

}

Question 5

पिछले 6 यूआरएल को स्ट्रिंग के रूप में प्राप्त करने के लिए कोणीय 6 अपडेटेड कोड।

import { Router, RoutesRecognized } from '@angular/router';
import { filter, pairwise } from 'rxjs/operators';


export class AppComponent implements OnInit {

    constructor (
        public router: Router
    ) {
    }

    ngOnInit() {
        this.router.events
            .pipe(filter((e: any) => e instanceof RoutesRecognized),
                pairwise()
            ).subscribe((e: any) => {
                console.log(e[0].urlAfterRedirects); // previous url
            });
    }

Question 6

इसने मेरे लिए कोणीय> = 6.x संस्करणों में काम किया:

this.router.events
            .subscribe((event) => {
              if (event instanceof NavigationStart) {
                window.localStorage.setItem('previousUrl', this.router.url);
              }
            });

Question 7

मैं एंगुलर 8 का उपयोग कर रहा हूं और @ फ्रैंकलिन-पीशियस का जवाब समस्या को हल करता है। मेरे मामले में, सदस्यता के अंदर पिछला url प्राप्त करें यदि यह दृश्य में कुछ डेटा के साथ जुड़ा हुआ है, तो कुछ दुष्प्रभाव हो सकते हैं।

मेरे द्वारा उपयोग किया जाने वाला वर्कअराउंड रूट नेविगेशन में एक वैकल्पिक पैरामीटर के रूप में पिछले यूआरएल को भेजने के लिए था।

this.router.navigate(['/my-previous-route', {previousUrl: 'my-current-route'}])

और घटक में इस मान को प्राप्त करने के लिए:

this.route.snapshot.paramMap.get('previousUrl')

this.router और this.route प्रत्येक घटक के निर्माता के अंदर इंजेक्ट किए जाते हैं और @ कोणीय / राउटर सदस्यों के रूप में आयात किए जाते हैं।

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

Question 8

2019 संस्करण में कोणीय 8 और rxjs 6

मैं दूसरों के महान समाधानों के आधार पर समाधान साझा करना चाहूंगा।

पहले मार्गों में परिवर्तन के लिए सुनने के लिए एक सेवा बनाएं और पिछले पिछले मार्ग को एक व्यवहार विषय में सहेजें, फिर इस एप्लिकेशन को मुख्य एप्लिकेशन में प्रदान करें। निर्माणकर्ता में इस सेवा का उपयोग तब करें जब आप चाहते हैं कि पिछले मार्ग को प्राप्त करें।

उपयोग का मामला: आप उपयोगकर्ता को एक विज्ञापन पृष्ठ पर पुनर्निर्देशित करना चाहते हैं, फिर ऑटो उसे पुनर्निर्देशित करता है, जहां से वह आया था इसलिए आपको ऐसा करने के लिए अंतिम पिछले मार्ग की आवश्यकता है।

// service : route-events.service.ts

import { Injectable } from '@angular/core';
import { Router, RoutesRecognized } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { filter, pairwise } from 'rxjs/operators';
import { Location } from '@angular/common';

@Injectable()
export class RouteEventsService {

    // save the previous route
  public previousRoutePath = new BehaviorSubject<string>('');

  constructor(
    private router: Router,
    private location: Location
  ) {

    // ..initial prvious route will be the current path for now
    this.previousRoutePath.next(this.location.path());


    // on every route change take the two events of two routes changed(using pairwise)
    // and save the old one in a behavious subject to access it in another component
    // we can use if another component like intro-advertise need the previous route
    // because he need to redirect the user to where he did came from.
    this.router.events.pipe(
      filter(e => e instanceof RoutesRecognized),
      pairwise(),
        )
    .subscribe((event: any[]) => {
        this.previousRoutePath.next(event[0].urlAfterRedirects);
    });

  }
}

app.module में सेवा प्रदान करते हैं

  providers: [
    ....
    RouteEventsService,
    ....
  ]

इसे app.component में इंजेक्ट करें

  constructor(
    private routeEventsService: RouteEventsService
  )

आखिरकार अपने इच्छित घटक में सहेजे गए पिछले मार्ग का उपयोग करें

  onSkipHandler(){
    // navigate the user to where he did came from
    this.router.navigate([this.routeEventsService.previousRoutePath.value]);
  }

Question 9

ANGULAR 7+ के लिए

दरअसल एंगुलर 7.2 के बाद से पिछले यूआरएल को सेव करने के लिए किसी सर्विस का इस्तेमाल करने की जरूरत नहीं है। आप लॉगिन पृष्ठ से लिंक करने से पहले अंतिम url सेट करने के लिए राज्य ऑब्जेक्ट का उपयोग कर सकते हैं। यहाँ एक लॉगिन परिदृश्य के लिए एक उदाहरण है।

@Component({ ... })
class SomePageComponent {
  constructor(private router: Router) {}

  checkLogin() {
    if (!this.auth.loggedIn()) {
      this.router.navigate(['login'], { state: { redirect: this.router.url } });
    }
  }
}

@Component({...})
class LoginComponent {
  constructor(private router: Router) {}

  backToPreviousPage() {
    const { redirect } = window.history.state;

    this.router.navigateByUrl(redirect || '/homepage');
  }
}

----------------

इसके अतिरिक्त आप टेम्पलेट में डेटा भी पास कर सकते हैं:

@Component({
  template: '<a routerLink="/some-route" [state]="{ redirect: router.url}">Go to some route</a>'
})
class SomePageComponent {
  constructor(public router: Router) {}
}

Question 10

@ GünterZöchbauer भी आप इसे लोकलस्टोरेज में सेव कर सकते हैं लेकिन मैं इसे पसंद नहीं करता) सर्विस में सेव करने के लिए बेहतर है और इस वैल्यू को वहां से प्राप्त करें

 constructor(
        private router: Router
      ) {
        this.router.events
          .subscribe((event) => {
            if (event instanceof NavigationEnd) {
              localStorage.setItem('previousUrl', event.url);
            }
          });
      }

Question 11

आप यहां बताए अनुसार स्थान का उपयोग कर सकते हैं ।

यदि मेरा लिंक नए टैब पर खुलता है तो यहां मेरा कोड है

navBack() {
    let cur_path = this.location.path();
    this.location.back();
    if (cur_path === this.location.path())
     this.router.navigate(['/default-route']);    
  }

आवश्यक आयात

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

Question 12

previousNavigationऑब्जेक्ट का उपयोग करके बहुत सरल :

this.router.events
  .pipe(
    filter(e => e instanceof NavigationEnd && this.router.getCurrentNavigation().previousNavigation),
    map(() => this.router.getCurrentNavigation().previousNavigation.finalUrl.toString()),
  )
  .subscribe(previousUrl => {});

Question 13

मुझे गार्ड के अंदर पिछले url तक पहुंचने के लिए कुछ संघर्ष करना पड़ा।
कस्टम समाधान लागू किए बिना, यह मेरे लिए काम कर रहा है।

public constructor(private readonly router: Router) {
};

public ngOnInit() {
   this.router.getCurrentNavigation().previousNavigation.initialUrl.toString();
}

प्रारंभिक url पिछला url पेज होगा।

Question 14

इस सरल समाधान ने मेरे लिए काम किया।

import 'rxjs/add/operator/pairwise';
import { Router } from '@angular/router';

export class TempComponent {
    constructor(private router: Router) {
        this.router.events.pairwise().subscribe((event) => {
            console.log(event); // NavigationEnd will have last and current visit url
        });
    };
}

Question 15

उपरोक्त सभी ANSWER कई बार URL लोड करेंगे। यदि उपयोगकर्ता किसी अन्य घटक पर भी गया है, तो ये कोड लोड होंगे।

सेवा का उपयोग करने के लिए इतना बेहतर है, अवधारणा का निर्माण। https://community.wia.io/d/22-access-the-previous-route-in-your-angular-5-app

यह कोणीय के सभी संस्करणों में अच्छी तरह से काम करेगा। (कृपया अपने app.module फ़ाइल में प्रदाताओं की सरणी में इसे जोड़ना सुनिश्चित करें!)

Question 16

Rxjx से जोड़ीदार का उपयोग करके आप इस आसान को प्राप्त कर सकते हैं। 'rxjs / ऑपरेटर्स' से {फ़िल्टर, युग्मय} आयात करें;

previousUrl: string;
constructor(router: Router) {
router.events
  .pipe(filter((evt: any) => evt instanceof RoutesRecognized), pairwise())
  .subscribe((events: RoutesRecognized[]) => {
  console.log('previous url', events[0].urlAfterRedirects);
  console.log('current url', events[1].urlAfterRedirects);
  this.previousUrl = events[0].urlAfterRedirects;
});

}

Question 17

जब मैं पिछले पृष्ठ पर वापस जाना चाहता था तो मुझे ऐसी ही समस्या थी। जितना मैं सोच सकता था उससे ज्यादा आसान समाधान था।

<button [routerLink]="['../']">
   Back
</button>

और यह मूल url पर वापस आ जाता है। मुझे उम्मीद है कि यह किसी की मदद करेगा;)