кнопка не отображается при навигации - PullRequest
Новая
       6

кнопка не отображается при навигации

0 голосов
/ 05 мая 2020

Привет. У меня есть код для рабочей кнопки «Назад», но он требует добавления конструктора, но у меня уже есть один, и кто-нибудь может предложить, как исправить проблему здесь, мой код ниже. У меня уже есть Конструктор, который предназначен для моих навигационных страниц, но он не работает, чтобы иметь оба одновременно. пытается решить проблему, разделив их запятыми, но не работает. Мне также нужно написать здесь больше слов для переполнения стека, извините

Спасибо, Адам 

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>

1 Ответ

0 голосов
/ 05 мая 2020

ion-back-button В документации говорится:

«Достаточно умен, чтобы знать, что отображать в зависимости от режима, а когда показывать на основе стека навигации».

Вам не нужно делать это вручную. Просто поместите кнопку ion-back-button в свой шаблон, и она должна скрываться, когда стек навигации имеет только 1 страницу.

Делаем это вручную: Если «умный» достаточно ion-back- кнопка не скрывается автоматически, затем в качестве последнего пересчета добавьте следующий css в global.scss файл. 

 ion-back-button {
      display: none;
    }

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

Ioni c framework добавляет класс .can- go -back в ion-back-button на основе стека навигации.

...