Ionic 为什么没有显示离子返回按钮?

ndasle7k  于 2022-12-09  发布在  Ionic
关注(0)|答案(8)|浏览(217)

ion-back-button没有显示在ion-menu-button的右边。为什么会这样?
ion-menu-buttonion-title正确显示并对齐在同一水平位置上。

<ion-header>
  <ion-toolbar>

    <ion-buttons slot="start">
      <!-- navigation button-->
      <ion-menu-button></ion-menu-button>
      <!-- optional back button-->
      <ion-back-button></ion-back-button> 
    </ion-buttons>

    <ion-title>
        {{ pageTitle | translate}}
    </ion-title>

  </ion-toolbar>
</ion-header>

在DOM检查器中,ion-back-button的CSS display属性被设置为none。为什么它会将自己设置为none
我以前

this.navCtrl.navigateForward('/term/' + term);

导航到此页面,因此我希望后退按钮可以选择此页面。为什么navigateForward没有添加到堆栈中,而这将使ion-back-button显示?

e5nqia27

e5nqia271#

如果堆栈中没有页面,则

<ion-back-button></ion-back-button>

如果你想显示,那么你需要在“defaultHref”属性中添加一个特定的页面。

<ion-back-button defaultHref="logout"></ion-back-button>

你需要从here中学习
https://ionicframework.com/docs/api/back-button

qyuhtwio

qyuhtwio2#

如果没有要显示的上一个覆盖图/页面,则该图标不可见
这样就可以设置css

ion-back-button {
   display: block;
}

然后在元素上添加click事件

<ion-back-button (click)="close()">
    <ion-icon name="close"></ion-icon>
</ion-back-button>

添加.ts文件

click() {
  this.modalCtrl.dismiss();
}
x3naxklr

x3naxklr3#

对于任何人谁有这个麻烦,和ion-back-button仍然没有出现,检查您是否已将IonicModule导入页面的模块中。在我创建ion-header的组件时,ion-back-button没有出现。这是因为我的ComponentsModule**(声明和导出所有组件的那个)*导入了CommonsModule没有导入IonicModule。所以总是检查导入中的IonicModule。否则返回按钮不会出现

q0qdq0h2

q0qdq0h24#

这是根页面吗?如果是,后退按钮将不会显示。
尝试添加属性defaultHref。例如:<ion-back-button defaultHref="home"></ion-back-button>。无论没有导航堆栈,它都应该显示。

nnt7mjpx

nnt7mjpx5#

所以Ionic开发者把生活变得复杂了,现在(Ionic5)的属性被称为default-href而不是defaultHref
但点击时仍不加载到href。

j2cgzkjk

j2cgzkjk6#

解决方法:我通过编程方式决定URI路径。缺点是,如果应用中添加了更多的详细页面,则需要添加它们(例如,在一个后退按钮限定路径数组中)。

<ion-button *ngIf="router.url.includes('/term/')"><ion-icon name="arrow-back"></ion-icon></ion-button>

已将路由器对象添加到此组件的构造函数

constructor(public router: Router) { }

如果有人仍然想出为什么程序化导航不添加到导航堆栈中-以便后退按钮会出现在详细信息页面上-我很乐意倾听。

0pizxfdo

0pizxfdo7#

只需要在scss文件中添加颜色即可显示出来。

ion-back-button{
  --color: black;
}

另外,不要忘记在html文件中添加href

<ion-buttons slot="start">
    <ion-back-button defaultHref="YourRouteHere"></ion-back-button>
</ion-buttons>
yws3nbqq

yws3nbqq8#

请确保您是通过修改路由历史记录的路由器链接到达该页面的。否则,由于没有先前路由的历史记录,后退按钮将不会显示。
我的问题是,我点击的链接,带我到一个页面前进,有routerDirection="none"。所以没有以前的路线,所以我的后退按钮没有显示。
不断变化

<IonRouterLink routerDirection="none" routerLink={`/item/${item.id}`}>...</IonRouterLink>

结束日期

<IonRouterLink routerDirection="forward" routerLink={`/item/${item.id}`}>...

解决了我的问题。

相关问题