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

【问题标题】：Routing to a tab from a button inside a modal in Ionic 4从 Ionic 4 中模式内的按钮路由到选项卡
【发布时间】：2020-11-12 02:40:27
【问题描述】：

我在 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'

提前感谢您的帮助！

【问题讨论】：

你的路线声明了吗？
是的，它已被声明，如果我通过在 url 中输入直接导航到它，我可以加载页面。
那么当您手动导航到“标签/注册”时，它运行良好吗？
好吧，实际路线是“/tabs/(signup:signup)”，所以当我导航到它时，如果我直接在浏览器 url 中输入它，它会很好地工作。但是它不会从函数本身加载并给出我发布的错误。
我没有收到(signup:signup) 部分？你在那里分配一个变量吗？

标签： javascript angular ionic4

【解决方案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.
}

【讨论】：

感谢大家的帮助！这个解决方案效果很好！

【解决方案2】：

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

在您的按钮点击/点击事件中：

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,
    });
  }
});

【讨论】：