CODEWITHSUNDEEP
angularnativescriptangular-router
iamjc015
iamjc015

Reputation: 2245

RouterExtension.back() not working Nativescript Angular

I have a module called TransactionModule which contains the following routes:

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'
      }
    ]
  },

What my transasction component do is that it holds my Tab and its template is like this:

<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>

Here's the component's code:

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

Now, what I want to do is when the back button of ActionBar has been clicked it should go back to the Dashboard (/dashboard, this is the origination route before going to transaction). However, it is not working.

When I try to log this.routerExtensions.canGoBack() it returns false. Why is that so? Why I cant navigate back to dashboard?

Upvotes: 2

Views: 769

Answers (2)

Roi Larrence Reyes Amatong
Roi Larrence Reyes Amatong

Reputation: 11

I had the same issue and I was able to resolved by using RouterExtension back function with BackNavigationOptions parameter, like this..

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

You have to specify from which ActivatedRoute should you start navigating back by specifying a value on relativeTo property. Hope that makes sense. :)

Upvotes: 1

Vaidas D.
Vaidas D.

Reputation: 413

Try to add in transaction.component.ts:

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

And in .html file:

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

Upvotes: 0

Related Questions