如何在 Ionic 5 中获得 canGoBack 功能？答案

【问题标题】：How to get canGoBack functionality in Ionic 5?如何在 Ionic 5 中获得 canGoBack 功能？
【发布时间】：2020-05-14 21:57:34
【问题描述】：

我正在尝试在 Ionic 应用程序中放置一个后退按钮，并在它位于根目录时隐藏后退按钮，该根不是固定的，可以根据流程进行更改。我在这里找到了以下代码：

...
constructor(
    private router: Router,
    private ionRouterOutlet: IonRouterOutlet
) {

}

ngOnInit() {
    this.canGoBack    = this.ionRouterOutlet.canGoBack();
...

如果它可以工作就好了，但是 IonRouterOutlet 是组件，不能像这样注入到另一个组件中。关于如何在 Ionic 5 中使用 angular 来完成的任何想法？

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

@ViewChild(IonRouterOutlet, { static : true }) routerOutlet: IonRouterOutlet;

    // if (this.routerOutlet.canGoBack()) or whatevet...

【讨论】：

如果我使用 { static: false } 有什么区别？
如果设置为false，则表示它是动态的而不是静态的，并且路由器出口应该是静态的，因为它是角度项目中的角度标准之一。像 ion-app 是 ionic 项目的标准之一，它拥有出口。动态意味着它可以由开发人员自行编辑，因此它应该是静态的。
如果我将它放在 AppComponet 类中，我会收到一条错误消息“找不到名称“ViewChild””。如果我把它放在外面，我会收到一条错误消息“预期声明”
已修复。我需要从 @angular/core 导入 ViewChild
就我而言，这个@ViewChild 解决方案不起作用。但是像问题中写的那样在页面组件的构造函数中注入private ionRouterOutlet: IonRouterOutlet 是有效的。我们在应用程序的模板中使用<ion-router-outlet>，然后在 AppComponent 中只使用一次@ViewChild。