Page Router Outlet Stops working after 3rd navigation


#1

I am using Angualar + Nativescript to develop my application. I am stuck at a task where I have to use page-router-outlet without clearing the history. Whenever I navigate to the third page, the displayed page shows no contents.

My view is created using JS code and not XML.

Here is the code for my login page…

import { NavigationExtras } from ‘@angular/router’;
import { Router, ActivatedRoute } from ‘@angular/router’;
import { Component, OnInit } from “@angular/core”;
import { Page } from “ui/page”;
import { GestureEventData } from “tns-core-modules/ui/gestures/gestures”;
import { RouterExtensions } from ‘nativescript-angular/router’;
import { LoginService } from ‘~/services/login.service’;

import { Button } from “tns-core-modules/ui/button”;
import { GridLayout } from ‘tns-core-modules/ui/layouts/grid-layout/grid-layout’;
import { ItemSpec } from ‘tns-core-modules/ui/layouts/grid-layout’;
import { Image } from ‘tns-core-modules/ui/image/image’;
import { TextField } from “ui/text-field”;
import { Label } from ‘ui/label’;

@Component({
selector: “my-login”,
template: ``
})

export class LoginComponent implements OnInit {

phone_number: String;

constructor(private page: Page, private activatedRoute: ActivatedRoute, private router: Router, private routerExtensions: RouterExtensions, private loginService: LoginService) {

    this.activatedRoute.params
        .forEach((params) => { this.phone_number = params["phone_number"]; });

    this.page.actionBarHidden = true;
    this.page.backgroundColor = "#f3f3f3";

}

ngOnInit() {
    this.page.addCssFile('./components/login/login.css');

    this.page.content = this.view();
}

login(password: String) {
    var data = {
        phone_number: this.phone_number,
        password: password
    };

    this.loginService.login(data)
        .subscribe(response => {
            if(response['status']) {
                this.routerExtensions.navigate(['/home', response['details']], {
                    transition: {
                        name: "slide",
                        duration: 200
                    },
                    clearHistory: true
                });

                // this.router.navigate(['home', response['details']]);
            }
            else {
                alert(response['message']);
            }
        });

    
}

view() {

    const text = new TextField();
    text.className = "text";
    text.hint = "Enter Password";
    text.secure = true;

    const login = new Button();
    login.text = "Login";
    login.className = "login";
    login.on("tap", (args) => {
        // args is of type EventData

        this.login(text.text);
    });




    const myGrid = new GridLayout();

    // Add views to grid layout
    myGrid.addChild(text);
    myGrid.addChild(login);

    // Set row property on views
    GridLayout.setRow(text, 6);
    GridLayout.setRow(login, 8);

    // Set rowSpan property on views

    // Set column property on views
    GridLayout.setColumn(text, 1);
    GridLayout.setColumn(login, 2);

    // Set colSpan property on views
    GridLayout.setColumnSpan(text, 7);
    GridLayout.setColumnSpan(login, 5);

    // Create columns specification (e.g. columns=""100, *, auto"")
    // ItemSpec second argumenter is of type GridUnitType ("pixel, "star", "auto")
    const firstColumn = new ItemSpec(1, "star");
    const secondColumn = new ItemSpec(1, "star");
    const thirdColumn = new ItemSpec(1, "star");
    const fourthColumn = new ItemSpec(1, "star");
    const fifthColumn = new ItemSpec(1, "star");
    const sixthColumn = new ItemSpec(1, "star");
    const seventhColumn = new ItemSpec(1, "star");
    const eighthColumn = new ItemSpec(1, "star");
    const ninthColumn = new ItemSpec(1, "star");

    // Create rows specification (e.g. rows=""*, *, *, *"")
    // ItemSpec second argumenter is of type GridUnitType ("pixel, "star", "auto")
    const firstRow = new ItemSpec(1, "star");
    const secondRow = new ItemSpec(1, "star");
    const thirdRow = new ItemSpec(1, "star");
    const forthRowq = new ItemSpec(1, "star");
    const fifthRow = new ItemSpec(1, "star");
    const sixthRow = new ItemSpec(1, "star");
    const seventhRow = new ItemSpec(1, "star");
    const eighthRow = new ItemSpec(1, "star");
    const ninthRow = new ItemSpec(1, "star");
    const tenthRow = new ItemSpec(1, "star");
    const eleventhRowq = new ItemSpec(1, "star");
    const twelvthRow = new ItemSpec(1, "star");
    const thirteenthRow = new ItemSpec(1, "star");
    const fourteenthRow = new ItemSpec(1, "star");
    const fifteenthRow = new ItemSpec(1, "star");

    myGrid.addColumn(firstColumn);
    myGrid.addColumn(secondColumn);
    myGrid.addColumn(thirdColumn);
    myGrid.addColumn(fourthColumn);
    myGrid.addColumn(fifthColumn);
    myGrid.addColumn(sixthColumn);
    myGrid.addColumn(seventhColumn);
    myGrid.addColumn(eighthColumn);
    myGrid.addColumn(ninthColumn);

    myGrid.addRow(firstRow);
    myGrid.addRow(secondRow);
    myGrid.addRow(thirdRow);
    myGrid.addRow(forthRowq);
    myGrid.addRow(fifthRow);
    myGrid.addRow(sixthRow);
    myGrid.addRow(seventhRow);
    myGrid.addRow(eighthRow);
    myGrid.addRow(ninthRow);
    myGrid.addRow(tenthRow);
    myGrid.addRow(eleventhRowq);
    myGrid.addRow(twelvthRow);
    myGrid.addRow(thirteenthRow);
    myGrid.addRow(fourteenthRow);
    myGrid.addRow(fifteenthRow);


    return myGrid;
}

}

I am using a similar method to create view for all the pages, and I am using Router Extension to navigate on click of buttons (and also to add transition).