কৌনিকটিতে পূর্ববর্তী পৃষ্ঠার ইউআরএল কীভাবে নির্ধারণ করবেন?

Question 1

ধরুন আমি পৃষ্ঠা যা URL আছে বর্তমানে am /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

হতে পারে অন্যান্য সমস্ত উত্তর কৌনিক ২. এক্স এর জন্য are

এখন এটি কৌণিক 5. এক্স এর জন্য কাজ করে না। আমি এটি নিয়ে কাজ করছি।

শুধুমাত্র নেভিগেশনএন্ডের সাথে আপনি পূর্ববর্তী ইউআরএল পেতে পারবেন না।

কারণ রাউটার "নেভিগেশনস্টার্ট", "রাউটস পরিচিতি", ..., থেকে "নেভিগেশনএন্ড" এ কাজ করে।

আপনি চেক করতে পারেন

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

তবে এখনও আপনি "নেভিগেশনস্টার্ট" দিয়েও পূর্ববর্তী url পেতে পারবেন না।

এখন আপনার জোড়া লাগাতে হবে।

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 এ পরিবর্তনের পদক্ষেপ।

সুতরাং এটি ফিল্টার এবং এটি থেকে পূর্ববর্তী url পেতে।

সর্বশেষ তবে কম নয়,

এই কোডটি প্যারেন্ট উপাদান বা উচ্চতরতে (উদাহরণস্বরূপ, app.componal.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
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

পূর্ববর্তী url স্ট্রিং হিসাবে পাওয়ার জন্য কৌণিক 6 আপডেট হওয়া কোড updated

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 ব্যবহার করছি এবং @ ফ্র্যাঙ্কলিন-পিউইসের উত্তরটি সমস্যার সমাধান করে। আমার ক্ষেত্রে, সাবস্ক্রাইবটির মধ্যে পূর্ববর্তী ইউআরএলটি কিছু দৃষ্টিভঙ্গির সাথে সংযুক্ত থাকলে কিছু পার্শ্ব প্রতিক্রিয়া সৃষ্টি করে।

আমি যে কার্যকারিতাটি ব্যবহার করেছি তা হ'ল রুট নেভিগেশনে urচ্ছিক প্যারামিটার হিসাবে পূর্ববর্তী ইউআরএল পাঠানো।

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.com অংশে ইনজেক্ট করুন

  constructor(
    private routeEventsService: RouteEventsService
  )

অবশেষে আপনি যে উপাদানটি চান সেটিতে সংরক্ষিত পূর্ববর্তী রুটটি ব্যবহার করুন

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

Question 9

অ্যাঙ্গুলার 7+ এর জন্য

আসলে কৌণিক ular.২ এর পরে পূর্ববর্তী ইউআরএল সংরক্ষণ করার জন্য কোনও পরিষেবা ব্যবহার করার দরকার নেই। আপনি লগইন পৃষ্ঠায় লিঙ্ক করার আগে শেষ 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

@ গন্তেরজ্যাচবাউয়ার এছাড়াও আপনি এটি লোকালস্টোরে সংরক্ষণ করতে পারেন তবে আমি সেটিকে পছন্দ করি না) পরিষেবাতে সঞ্চয় করা এবং সেখান থেকে এই মানটি পাওয়া ভাল

 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

একজন প্রহরার অভ্যন্তরে পূর্ববর্তী ইউআরএলটি অ্যাক্সেস করার জন্য আমার কিছুটা লড়াই হয়েছিল।
কাস্টম সমাধান বাস্তবায়ন না করে, এইটি আমার পক্ষে কাজ করছে।

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

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

প্রাথমিক url পূর্ববর্তী url পৃষ্ঠা হবে।

Question 14

উপরোক্ত সমস্ত উত্তর একাধিকবার ইউআরএল লোড হবে। যদি ব্যবহারকারী অন্য কোনও উপাদানও দেখে থাকেন তবে এই কোডগুলি লোড হবে।

ব্যবহার করা এত ভাল, পরিষেবা তৈরির ধারণা। https://commune.wia.io/d/22-access-the- পূর্ববর্তী-route-in- আপনার-angular-5-app

এটি Angular এর সমস্ত সংস্করণে ভাল কাজ করবে। (দয়া করে এটি আপনার অ্যাপ্লিকেশন.মডিউল ফাইলের সরবরাহকারী অ্যারেতে যুক্ত করার বিষয়টি নিশ্চিত করুন!)

Question 15

আরএক্সজেক্স থেকে পেয়ারওয়াইজ ব্যবহার করে আপনি এটি আরও সহজ অর্জন করতে পারেন। 'আরএক্সজেএস / অপারেটর' থেকে ফিল্টার, পেয়ারওয়াইজ import আমদানি করুন;

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 16

পূর্ববর্তী পৃষ্ঠায় ফিরে যেতে চাইলে আমারও একই সমস্যা হয়েছিল। সমাধান আমি কল্পনা করতে চেয়ে সহজ ছিল।

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

এবং এটি প্যারেন্ট url এ ফিরে আসে। আমি আশা করি এটি কাউকে সহায়তা করবে;)