从 Ionic 4 模式内的按钮路由到选项卡

Question

我在 Ionic 4 Modal 中有一个按钮，我希望单击该按钮可以打开一个页面，该页面是一个选项卡。

我可以验证该选项卡是否存在，因为我已直接导航到它。

这是我的按钮代码：

<ion-button expand="block" class="signup" margin (click)="signupPage()">Don't have account? Sign Up</ion-button>

如您所见，单击此处激活此功能的按钮会加载点击功能：

signupPage() {
    this.modalController.dismiss();
    this.router.navigate([`/tabs/(signup:signup)`]);
  }

模式关闭，但我没有转到选项卡，这是我目前遇到的错误。

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs'
Error: Cannot match any routes. URL Segment: 'tabs'

提前感谢您的帮助！

Answer 1

按如下方式更改您的标记和功能。您应该更改选项卡路由，但您使用 Angular 路由器来更改路由。

[attr.href] 会将 href 属性添加到 ion-button 元素。

<ion-button expand="block" class="signup" margin [attr.href]="'/tabs/(signup:signup)'"  (click)="signupPage()">Don't have account? Sign Up</ion-button>

signupPage() {
    this.modalController.dismiss();
    // you don't need to route from here anymore.
}

Answer 2

也可以通过以下方式完成：

在您的按钮上 tap/click 事件：

signupPage() {
  this.modalController.dismiss(dismissed: true,
    route: `/tabs/(signup:signup)`);
}

在 return await modal.present();

之前显示模态的位置

 //According to your requirements

 //you can use this

 modal.onDidDismiss().then((result) => {
  console.log(result.data);
  if (result.data.route) {
    this.router.navigate([result.data.route]);
  }


 //or you can use this one
 modal.onDidDismiss().then((result) => {
  console.log(result.data);
  if (result.data.route) {
    this.router.navigate([result.data.route], {
      relativeTo: this.route,
    });
  }
});

从 Ionic 4 模式内的按钮路由到选项卡

Routing to a tab from a button inside a modal in Ionic 4

javascript

angular

ionic4