RouterExtension.back() 不工作 Nativescript Angular答案

【问题标题】：RouterExtension.back() not working Nativescript AngularRouterExtension.back() 不工作 Nativescript Angular
【发布时间】：2020-04-19 21:06:52
【问题描述】：

我有一个名为 TransactionModule 的模块，其中包含以下路由：

transaction-routing.module.ts

export const routes: Route[] = [
  {
    path: 'transaction',
    component: TransactionComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'deposit',
        component: DepositComponent,
        outlet: 'depositTab'
      },
      {
        path: 'skrill-deposit',
        component: SkrillDepositComponent,
        outlet: 'depositTab'
      },
      {
        path: 'withdrawal',
        component: WithdrawalComponent,
        outlet: 'withdrawalTab'
      }
    ]
  },

我的事务组件做的是它持有我的标签，它的模板是这样的：

<ActionBar title="ActionBar title">
  <NavigationButton android.systemIcon="ic_menu_back" text="Back To Dashboard" (tap)="goBack()"></NavigationButton>
</ActionBar>
<TabView androidTabsPosition="bottom" selectedIndex="0">
  <page-router-outlet *tabItem="{title: 'Deposit'}" name="depositTab" actionBarVisibility="never">
  </page-router-outlet>

  <page-router-outlet *tabItem="{title: 'Withdrawal'}" name="withdrawalTab" actionBarVisibility="never">
  </page-router-outlet>
</TabView>

这是组件的代码：

transaction.component.ts：

export class TransactionComponent implements OnInit {

  constructor(private routerExtensions: RouterExtensions, 
    private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.routerExtensions.navigate(
      [{ outlets: { depositTab: ['deposit'], withdrawalTab: ['withdrawal'] } }],
      { relativeTo: this.activatedRoute }
   );
  }

  goBack() {
    console.log(this.routerExtensions.canGoBack());
    this.routerExtensions.back();
  }
}

现在，我要做的是，当单击 ActionBar 的后退按钮时，它应该返回到仪表板（/dashboard，这是进行事务之前的起始路径）。但是，它不起作用。

当我尝试记录 this.routerExtensions.canGoBack() 时，它返回 false。为什么呢？为什么我无法导航回仪表板？

【问题讨论】：

你能分享一个可以重现问题的 Playground 示例吗？

标签： angular nativescript angular-router

【解决方案1】：

我有同样的问题，我可以通过使用带有 BackNavigationOptions 参数的 RouterExtension 返回函数来解决，就像这样..

    this.router.back({
      outlets: null,
      relativeTo: this.active,
    });

您必须通过在 relativeTo 属性上指定一个值来指定应该从哪个 ActivatedRoute 开始导航。希望这是有道理的。 :)

【讨论】：

【解决方案2】：

尝试在transaction.component.ts中添加：

get canGoBack() {
    return this.router.canGoBack();
}

在 .html 文件中：

<NavigationButton 
    android.systemIcon="ic_menu_back" 
    text="Back To Dashboard"
    (tap)="onGoBack()" (tap)="goBack()">
</NavigationButton>

【讨论】：