setRoot not functioning properly within the getActiveNavs/getRootNavById methods

In my changeView() method, I am performing checks on certain authentications and permissions.

Below is the actual method:

changeView () : void {
    let navCtrl: NavController = this.app.getActiveNavs()[0];
    let hasFetchedDashboardPermission: boolean = this.permissionService.hasFetchedMenuPermission(PermissionId.PAGE_HOME);
    // let testNav;

        console.log(this.globalService.isAuthenticated(), !hasFetchedDashboardPermission, navCtrl.getActive() !== undefined)
        if(navCtrl.getActive() !== undefined){
            console.log('active navCtrl', navCtrl.getActive().id)
        }

        if (this.globalService.isAuthenticated() && hasFetchedDashboardPermission 
                && navCtrl.getActive() !== undefined && navCtrl.getActive().id !== 'home' && navCtrl.getActive().id !== 'collegekaart') {
            console.log('setHome');

            navCtrl.setRoot('home');
        } else if (this.globalService.isAuthenticated() && !hasFetchedDashboardPermission
                    && navCtrl.getActive() !== undefined && navCtrl.getActive().id !== 'login') {

            this.globalService.deleteApiSecurityParams();

            console.log('check1', navCtrl.isTransitioning());
            let test = this.app.getActiveNavs();
            test[0].setRoot('login');

            this.testNav = this.app.getRootNavById('n4');
            this.testNav.setRoot('login');

            // this.app.getRootNav().setRoot('login');

            //navCtrl.setRoot('login', null, null, () => { console.log('onDane') })
            // navCtrl.setRoot('login');
        }
    }

Despite trying various approaches, none seem to be working. I am puzzled as to why the setRoot method is not being executed!!

Answer №1

Can you share your console output with me? Are there any logs that are not being displayed?

Have you considered using dependency injection for your NavController instead of manually retrieving it using this.app.getActiveNavs()[0]?

You could try directly adding it to your component constructor like so:

import { NavController } from 'ionic-angular';

export class ItemDetailsPage {

    constructor(navCtrl: NavController) {}

    changeView () : void {

        ... 

        if(this.navCtrl.getActive() !== undefined){
            console.log('active navCtrl', this.navCtrl.getActive().id)
        }

        ...
    }
}

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 process for adding a script to the head tag in Next.js?

I have a query regarding my current setup in next.js. I am using the src/app directory structure, and it seems that this arrangement does not allow for the use of next/head. Therefore, I would like to know how I can insert scripts and other tags into the ...

Is there a way in TypeScript to prevent the modification of a class property and still trigger a runtime error if attempted?

I currently have the following code snippet: class Computed<Value> { _value: Value; get value(){ return this._value; } } When attempting to set the value property, TypeScript returns an error message: Cannot assign to value because it is ...

Extracting event handlers using @ContentChildren: A guide

I am dealing with a my-button component that needs to be enclosed within a my-button-row component in the following manner: <my-button-row> <my-button [label]="Some Label" (click)="func1($event)"></my-button> <my-button [label ...

How to Embed HTML Tags in a TypeScript File in Angular

I'm currently utilizing Angular2 and I'm looking to incorporate an HTML tag inside the return function in a TypeScript file. tooltip: (param: any) => { return `<span> ${param.value} </span>`; } I've attempted ...

Continuously apply the template in a recursive manner in Angular 2 without reintroducing any duplicated components

Recently, I delved into the world of angular 2 and found it to be quite fascinating. However, I'm currently facing a roadblock and could really use some assistance. The scenario is as follows: I am working on creating a select box with checkboxes in ...

Unable to configure unit tests for Vue project using Typescript due to TypeError: Unable to destructure property `polyfills` of 'undefined' or 'null'

I've been working on adding unit tests for an existing Vue project that uses Typescript. I followed the guidelines provided by vue-test-utils for using Typescript, but when I ran the test, I encountered an error message stating: TypeError: Cannot d ...

Creating a personalized bullet text box with HTML and Javascript: A step-by-step guide

I have been working on creating a customized text box using HTML and JavaScript that has specific requirements: The text box should start with a single bullet point, like this: https://i.sstatic.net/U7pHo.png Each new line entered by the user should autom ...

Compiling TypeScript on save disrupts AngularJS functionality in Visual Studio 2017

I am currently working on a project in Visual Studio Community 2017 (15.2) that involves AngularJS 1.6.5 and a NancyFX server. You can find the code for this project here: https://github.com/GusBeare/NancyAngularTests This project serves as a learning pl ...

Dynamic Object properties are not included in type inference for Object.fromEntries()

Hey there, I've been experimenting with dynamically generating styles using material UI's makeStyles(). However, I've run into an issue where the type isn't being correctly inferred when I use Object.fromEntries. import * as React from ...

Is there a way to retrieve the requested data in useEffect when using next.js?

As a newcomer to next.js and TypeScript, I am facing an issue with passing props from data retrieved in useEffect. Despite my attempts, including adding 'return scheduleList' in the function, nothing seems to work. useEffect((): (() => void) = ...

Exploring the functionalities of React Native with react-hook-form and implementing them with TypeScript

I've been working on creating a custom Input component in react native using typescript for the react-hook-form library. type CustomInputProps = { name: any, control: any } const CustomInput: FC<CustomInputProps> = ({name, control, ...p ...

Creating Tables with Horizontal Headers using drawHeaderRow in Typescript

Utilizing jsPDF, I was able to generate a table from JSON data and store it in a PDF document. To showcase this functionality, I developed an Angular2/Typescript application. This application creates a table based on my JSON data. My goal now is to use jsP ...

What is the best approach to obtain a Generic and static reference to a MongoDB collection?

My goal is to create a generic and static class method called getOne<T>() that can return MongoDB objects as an Item, where the Item can be either a Book or a Film. Initially, I had an idea on how to achieve this, but now I am struggling with dynamic ...

Transform normal typescript conditionals into ternary expressions

I'm trying to simplify the following if statement into a ternary statement. The challenge is that the value of group needs to be based on the value of coverageLineId. let group = (coverageLineId == 1) ? this.medicalBenefitsGroupsView.find((x) => x. ...

Start by prioritizing items with a higher click count when looping through the

I am creating a component to display recent search results. The API provides these results, including a value called "click_count". Each time a user clicks on a positive search result from the recent searches, this click_count value will increment by one. ...

Struggling to execute a basic Typescript file

I recently embarked on a journey to learn Typescript by enrolling in this specific course. The process of setting up everything seemed simple enough. I created a new directory, executed the command npm init, and followed it up with npm install --save-dev t ...

What is the relationship between Typescript references, builds, and Docker?

I am facing a dilemma with my projectA which utilizes a common package that is also needed by my other Nodejs services. I am unsure of the best approach to package this in a Docker file. Ideally, running tsc build would compile both the project and the dep ...

Retrieve data from each object in the API and then initiate a new request

Here is how my first post request appears: this.http.post('http://localhost:8080/api/userfilm/get/', { name: this.name }) This request returns an array of objects with the property 'filmid'. Now, let's take a look at my sec ...

What is the method for displaying an object as JSON on the console in Angular2?

I've been utilizing a service to input my form data into an array within my angular2 application. The information is organized in the following manner: arr = [] arr.push({title:name}) After executing console.log(arr), it displays as Object. However, ...

TS2532: The entity could be considered as undefined

Attempting API calls and generating a class for the API response model, but struggling to retrieve response values. Here is my code: In app component.ts, I have ons_list as my response object, but unable to access ons_list.success. In home.component.ts i ...