Having trouble navigating using router.navigate in the nativescript-tab-navigation template?

I have everything properly configured in my routes and no errors are popping up. When the initial tab is loaded, I am attempting to automatically switch to the second tab based on whether the user is logged in or not.

tabs-routing.module.ts file:

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { TabsComponent } from "./tabs.component";
import { AccountComponent } from './account/account.component';
import { AuthComponent } from './account/auth/auth.component';
import { AddComponent } from './add/add.component';
import { PantryComponent } from './pantry/pantry.component';

const routes: Routes = [
    { path: "", component: TabsComponent, children: [
      {path: 'pantry', component: PantryComponent},
      {path: 'add', component: AddComponent},
      {path: 'account', component: AccountComponent, children: [
        {path: 'auth', component: AuthComponent}
      ]}
    ]},
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class TabsRoutingModule { }

pantry.component.ts file:

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

require( "nativescript-localstorage" );

@Component({
    selector: "pantry",
    moduleId: module.id,
    templateUrl: "./pantry.component.html"
})
export class PantryComponent implements OnInit {

    constructor(private router : Router, private realRouter: NativeScriptRouterModule) {
        /* ***********************************************************
        * Use the constructor to inject services.
        *************************************************************/
    }

    ngOnInit(): void {
        /* ***********************************************************
        * Use the "ngOnInit" handler to initialize data for the view.
        *************************************************************/

        var loggedIn = sessionStorage.getItem('loggedIn');
        if(loggedIn == 'true'){
          console.log(loggedIn);
        }
        else{
          console.log(loggedIn);
          this.router.navigate(['/tabs/add']);
        }
    }
}

this seems ineffective. What could be preventing navigation to the AddComponent?

Answer №1

To make it function properly, simply substitute

this.router.navigate(['/tabs/add'])
with this.router.navigate(['/add'])

Answer №2

I encountered a similar issue and attempted various solutions without success. Is there a workaround for smoothly navigating between tabs? Interestingly, manually switching tabs seems to function correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason for certain packages not being placed in the vendor folder during an Angular 2 installation?

I recently created a basic project in angular 2 using their cli. I noticed that when I use 'node install --save' for a material design project, the files are stored in both node_modules and dist/vendor directories. However, when I installed angul ...

Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

After setting up my react project using the typescript template, I decided to style the material-ui Button component using the 'styled' method from the styled-components library as shown below: import React from 'react'; import styled f ...

A TypeScript function that returns the ReturnType of a specific callback function

Is it possible to define an annotation for a function that accepts a callback, and have the function return type determined by the callback's return type? // Suppose the callback takes a number as argument function processCallback(cb: (arg:number) =&g ...

What is the best way to deselect the first radio button while selecting the second one, and vice versa, when there are two separate radio groups?

I am looking to achieve a functionality where if the first radio button is selected, I should receive the value true and the second radio button should be unselected with the value false. Similarly, if the second radio button is selected, I should receive ...

What could be the reason for receiving an undefined value when trying to determine the size of the Set

Within one of my functions, I am encountering the following code: this.personService.getPersonInfo(this.personId).subscribe((res => { let response = res.body; let num = response.personList.size; ... })) Here is what the expe ...

Unable to fetch data from URL in Angular using the HttpClientModule

I have a goal in my application to retrieve data from the following URL and showcase it within the app: https://jsonplaceholder.typicode.com/posts/1 The issue I'm encountering is that the data is not being displayed in my app. The console is showing ...

Error in Angular 2 after transition to @types: encountering "require" name not found issue

After transitioning my project from old typings to types-publisher, I have successfully resolved most of my dependencies. However, I am consistently encountering an error that reads Cannot find name 'require'. Below is a snippet from my tsconfig. ...

Guide on implementing ng2-completer with translation features

Recently delving into Angular, I'm experimenting with integrating the ng2-completer module alongside the TranslateModule. The issue arises when attempting to fetch JSON data from the server-side. The retrieved JSON structure is as follows: [{"id":10 ...

Is there a compelling case for implementing Meteor in 2017?

Back in the day, Meteor was expected to revolutionize web development on node by simplifying the process of creating interactive applications. Though I'm not well-versed in its history, it seems like most of the development effort has shifted elsewher ...

Issue with Material UI DateTimePicker not submitting default form value

Currently, I am utilizing React for my frontend and Ruby on Rails for my backend. My issue lies in submitting the value from my materialUI DateTimePicker via a form. The problem arises when I attempt to submit the form with the default DateTime value (whic ...

Tips for modifying TypeScript class types based on a parent class object property?

As part of a project, I have created two classes: ParentClass childrenClass which extends the ParentClass class Displayed below is the code for my ParentClass: interface ConfSetup<T extends boolean> { enabled: T; permissions: bigint[]; locati ...

When running npm test in Angular 12, an error message pops up saying "Failed to load color version"

After transitioning our application from angular 6 to 12, everything seemed fine as I was able to successfully run the application using 'npm start' and test its UI features. However, upon attempting to run my angular unit tests with 'npm ru ...

The attribute 'pixiOverlay' is not found in the property

Working on my Angular 8 project, I needed to display several markers on a map, so I chose to utilize Leaflet. Since there were potentially thousands of markers involved, I opted for Leaflet.PixiOverlay to ensure smooth performance. After installing and imp ...

Changing row colors based on property conditions in Angular 4

Hey there! I'm fairly new to Angular 4 and I've been working on creating a p-dataTable. My goal is to change the color of each row based on the quantity property of my object. Specifically, if the quantity is less than 10, I want the row to be di ...

Can we use the contents of the node_modules folder to identify the host OS and node version?

How can I determine the operating system (Windows or Linux) and nodejs version used for running npm install by examining the contents of the node_modules folder? A glance at node_modules/.bin reveals both bash and .cmd files, but I'm unsure how to dif ...

Error Styling: Using CSS to Highlight Invalid Checkboxes within a Group

Is there a way to create a bordered red box around checkboxes that are required but not selected? Here is the code I currently have: <div class="fb-checkbox-group form-group field-checkbox-group-1500575975893"> <label for="checkbox-group-15005 ...

What is the process for transforming a Typescript source file into JavaScript?

I have a basic HTML file with a script source set to index.ts. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge ...

How to handle type errors when using properties in Vue3 Single File Components with TypeScript

I've hit a roadblock while attempting to utilize properties in Vue3. Despite trying various methods, I keep facing issues during the type-check phase (e.g.: yarn build). The project I'm working on is a fresh Vue3-ts project created using Vite. B ...

Tips for navigating back to the previous component in React:

Greetings! I'm currently working on a simple CRUD example using React.Js and TypeScript. In my project, I have set up the following component hierarchy: -FetchNaselje --Modal ---AddNaselje It's structured such that AddNaselje is a child of Moda ...

The NGX-Datatable is showing certain numerical values as 'Infinity'

I'm currently investigating why I keep seeing the word 'Infinity' displayed for certain values in my table. For instance, one of the columns is labeled 'Bill To' and has a value of '20E7543' as a string. Despite confirmi ...