如何在Ionic 4中返回上一页

Question

我想在Ionic4（Angular 7）中添加返回按钮，但我找不到适当的方法在Angular路由器中实现。

导入路由器：import {Router} from '@angular/router'; 在组件处理程序中点击按钮后如何返回？我想使用'@angular/router'来实现，而不是'@angular/common' => Location。

- Valeri

---

https://dev59.com/nVsW5IYBdhLWcg3wDzrs - nircraft

可能是Angular 5 - 我应该使用 href 还是 location.back() 来向后导航？的重复问题。 - nircraft

我想要不使用Location，只用@angular/router返回。 - Valeri

Answer 1

由于您正在使用Ionic 4，因此可以使用以下方法返回：

constructor(private navCtrl: NavController) {}

btnClick(){
this.navCtrl.navigateBack('/home'); 
} 

- Peter Haddad

---

当 OP 使用 Angular 路由时，使用 @angular/common 中的 location.back() 是否更为合适？（请参阅 https://angular.io/api/common/Location） - Fabian N.

当您使用navigateBack()时，它将被调用，Ionic在其代码中使用它。 - Peter Haddad

我刚刚意识到，当你直接使用 location.back() 时，你不会得到一个合适的后退动画。 - Fabian N.

Answer 2

使用Angular路由，您可以使用Location API：

constructor(private location: Location){}

当你需要返回时，请调用以下方法：

this.location.back();

请注意，对于Angular 7，您需要从@angular/common导入Location。

- Andrew Pomorski

Answer 3

如果你想回到之前的路线，请按照以下步骤操作。

constructor(private navCtrl: NavController) {}

goBack(){
 this.navCtrl.pop(); 
} 

这将从导航栈中弹出当前页面，并将您返回到上一页和您向前导航的页面部分。

- KevinTenyRoy