导航时按钮不显示

Question

嗨，我有一个用于返回按钮的代码，但它需要添加一个构造函数，但我已经有人可以建议如何在下面的代码中解决这个问题。我已经有一个用于我的导航页面的构造函数，但它不能同时包含两者。试图通过让它们用昏迷分隔但不起作用来解决问题。对于堆栈溢出，我还需要在这里写更多的文字，对不起

谢谢 亚当

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { RegformPage } from 'src/app/regform/regform.page';
import { CreditcardPage } from 'src/app/creditcard/creditcard.page';
import {IonRouterOutlet} from '@ionic/angular';
@Component({
  selector: 'app-forms',
  templateUrl: './forms.page.html',
  styleUrls: ['./forms.page.scss'],
})
export class FormsPage implements OnInit {
canGoBack: boolean = false;

  constructor(private router: Router,routerOutlet: IonRouterOutlet) { }

  ngOnInit() {
    this.canGoBack = this.routerOutlet &&
                         this.routerOutlet.canGoBack();
  }

  regform(){
  this.router.navigate(['/regform']);
  }
  ccform(){
  this.router.navigate(['creditcard']);
  }

}

<ion-header>
  <ion-toolbar>
  	<ion-buttons slot="start">
      <ion-back-button *ngIf="canGoBack"></ion-back-button>
    </ion-buttons>
    <ion-title align="center">Forms</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

       <ion-card>
  <ion-card-header>
    <ion-card-title align="center">Registration Form</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    <ion-button align="center" (click)="regform()" color="primary">Get Started</ion-button>
  </ion-card-content>
</ion-card>



    <ion-card>
  <ion-card-header>
    <ion-card-title align="center">Credit Card Form</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    <ion-button align="center" (click)="ccform()" color="primary">Get Started</ion-button>
  </ion-card-content>
</ion-card>


    <ion-card>
  <ion-card-header>
    <ion-card-title align="center">Equipment Rental Form</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    <ion-button align="center"class="reg" color="primary">Get Started</ion-button>
  </ion-card-content>
</ion-card>

<ion-card>
  <ion-card-header>
    <ion-card-title align="center">Field Trip Form</ion-card-title>
  </ion-card-header>

  <ion-card-content>
    <ion-button align="center"class="reg" color="primary">Get Started</ion-button>
  </ion-card-content>
</ion-card>

  

Answer 1

ion-back-button 文档说：

“它足够聪明，可以根据模式和时间知道要渲染什么 根据导航堆栈显示。”

您无需手动执行此操作。只需将 ion-back-button 放在模板中，当导航堆栈只有 1 页时，它应该会自行隐藏。

手动操作： 如果“智能”足够的 ion-back-button 没有自动隐藏，那么作为最后一个 resot，将以下 css 添加到 global.scss 文件中。

 ion-back-button {
      display: none;
    }

.can-go-back {
    ion-back-button {
      display: block !important;
    }
  }

Ionic 框架基于导航栈向ion-back-button 添加 .can-go-back 类。