web-dev-qa-db-ja.com

前のルートを取得Angular 7

ルート変更を保存できる小さなサービスを作成しました。

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

@Injectable()
export class RouteState {

  private previousUrl: string;
  private currentUrl: string;

  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;
  }    
}

ただし、ルートが変更されるたびに、vars currentUrlおよびpreviousUrlは未定義です。私は何か間違ったことをしていますか？

angulartypescriptangular7
9
Testador

Angularの位置情報サービスを使用します。angularに組み込まれており、次のように '@ angular/common'からインポートします。

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { Hero }         from '../hero';
import { HeroService }  from '../hero.service';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: [ './hero-detail.component.css' ]
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;

  constructor(
    private location: Location
  ) {}

  goBack() {
    this.location.back();
  }   
}

次に、location.back（）を使用して前のページに移動します。これは実際の例です：

https://stackblitz.com/angular/qvvrbgrmmda

19
siddharth shah

以前のルートが必要な場合は、このようなオブザーバブルを作成できます

 get previousRoute$(): Observable<string> {
    return this.router.events.pipe(
      filter(e => e instanceof RoutesRecognized),
      pairwise(),
      map((e: [RoutesRecognized, RoutesRecognized]) => e[0].url)
    );
  }

これで、このオブザーバブルをサブスクライブして任意のアクションを実行できます（OnDestroyイベントでこのオブザーバブルをサブスクライブ解除してください）。

this.previousRoute$.subscribe(url => {
  //perform your action
});

注：このオブザーバブルは、ユーザーが2番目のナビゲーションにいるときにイベントの発行を開始します。

2
Vikash Dahiya

ルーターから、メソッドを使用して最後に成功したナビゲーションを取得できます

const lastSuccessfulNavigation = router.getLastSuccessfulNavigation();

そのオブジェクトは type Navigation であり、他のプロパティの中にpreviousNavigationプロパティが含まれ、そのプロパティも同じNavigationタイプです。

const previousNavigation = lastSuccessfulNavigation.previousNavigation;

以前のナビゲーションは type UrlTree であり、navigateByUrlメソッドでのナビゲーションに直接使用できます。

router.navigateByUrl(previousNavigation);
0
Wilt

Angularによって提供される位置情報サービスを使用したくない場合は、次のサービスを試すことができます。

// service to get prev route
@Injectable()
export class RouteBackService {
    public getPreviousUrl(routeArray): string {
        let prevRoute = '';
        for (let i = 0; i < routeArray.length - 1; i++) {
            if (routeArray[i].url._value[0].length > 0) {
                prevRoute += routeArray[i].url._value[0].path + '/';
            } 
        }
        return prevRoute.slice(0, -1);
    }
}

// in the component from where you want to route back    
export class YourComponent {
    constructor (private _aRoute: ActivatedRoute,
                   private _routeBack: RouteBackService
                   private _router: Router) {}
    goBack() {
        const prevRoute=this._routeBack.getPreviousUrl(this._aRoute.pathFromRoot);
        this._router.navigate([prevRoute]);
    }
}
0
Bipin Shrestha