Angular:如何仅在应用程序内部返回
Angular: how to only go back if inside application
返回 Angular 中的上一页是 :
import {Component} from '@angular/core';
import {Location} from '@angular/common';
@Component({
// component's declarations here
})
class SomeComponent {
constructor(private _location: Location)
{}
backClicked() {
this._location.back();
}
}
这相当于点击浏览器的“后退”按钮。但是如何修改此代码,以便如果 this._location.back()
将带您到应用程序的 url 外部 ,它会将您重定向到一条路线在应用内。
例如,假设您在 Google.com
,然后粘贴到 my-app.com/page-foo
并导航到那里。 this._location.back()
会将您带回 Google.com
,但我希望它导航到 my-app.com/page-bar
。
在 https://nils-mehlhorn.de/posts/angular-navigate-back-previous-page 找到了答案。
1. 新建一个navigation-service
:
import { Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { Location } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class NavigationService {
private MAX_HISTORY_LEN = 10; // prevent history from growing indefinitely
private history: string[] = [];
constructor(private router: Router, private location: Location) {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.history.push(event.urlAfterRedirects);
if (this.history.length > this.MAX_HISTORY_LEN) {
this.history.shift();
}
}
});
}
back(): void {
this.history.pop();
if (this.history.length > 0) {
this.location.back();
} else {
this.router.navigateByUrl('/');
}
}
}
2. 将服务注入 app.component.ts
以便它跟踪整个应用程序的历史记录
export class AppComponent implements AfterViewInit {
constructor(private navigationService: NavigationService) {
}
...
3. 然后更新 (click)
功能,无论你想在哪里使用它。使用原始示例:
@Component({
// component's declarations here
})
class SomeComponent {
constructor(private navigationService: NavigationService)
{}
backClicked() {
this.navigationService.back();
}
}
我根据博文做了一些调整:
- 添加了
MAX_HISTORY_LEN
以防止历史数组在整个应用程序使用过程中无限增长
- 在
app.component.ts
中注入了 navigation-service
以便它始终跟踪历史记录。如果您只在调用 .back()
的组件中注入服务,那么在您第一次调用它时它可能没有历史记录。
返回 Angular 中的上一页是
import {Component} from '@angular/core';
import {Location} from '@angular/common';
@Component({
// component's declarations here
})
class SomeComponent {
constructor(private _location: Location)
{}
backClicked() {
this._location.back();
}
}
这相当于点击浏览器的“后退”按钮。但是如何修改此代码,以便如果 this._location.back()
将带您到应用程序的 url 外部 ,它会将您重定向到一条路线在应用内。
例如,假设您在 Google.com
,然后粘贴到 my-app.com/page-foo
并导航到那里。 this._location.back()
会将您带回 Google.com
,但我希望它导航到 my-app.com/page-bar
。
在 https://nils-mehlhorn.de/posts/angular-navigate-back-previous-page 找到了答案。
1. 新建一个navigation-service
:
import { Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { Location } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class NavigationService {
private MAX_HISTORY_LEN = 10; // prevent history from growing indefinitely
private history: string[] = [];
constructor(private router: Router, private location: Location) {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.history.push(event.urlAfterRedirects);
if (this.history.length > this.MAX_HISTORY_LEN) {
this.history.shift();
}
}
});
}
back(): void {
this.history.pop();
if (this.history.length > 0) {
this.location.back();
} else {
this.router.navigateByUrl('/');
}
}
}
2. 将服务注入 app.component.ts
以便它跟踪整个应用程序的历史记录
export class AppComponent implements AfterViewInit {
constructor(private navigationService: NavigationService) {
}
...
3. 然后更新 (click)
功能,无论你想在哪里使用它。使用原始示例:
@Component({
// component's declarations here
})
class SomeComponent {
constructor(private navigationService: NavigationService)
{}
backClicked() {
this.navigationService.back();
}
}
我根据博文做了一些调整:
- 添加了
MAX_HISTORY_LEN
以防止历史数组在整个应用程序使用过程中无限增长 - 在
app.component.ts
中注入了navigation-service
以便它始终跟踪历史记录。如果您只在调用.back()
的组件中注入服务,那么在您第一次调用它时它可能没有历史记录。