Onclick image to move another page is not working

Question

• I'm new to nativescript. I'm navigation from Alert page to Naviagation page. I have posted all relevant codes.please check it.

• I'm not getting any issue.When performing image onClick I'm able to call this method onNotification().

• I'm able to see this console log in command prompt

  console.log("SteveCheck", "Test");

• But I don't know, Why it is not moving to notification page when click on the button in alert page.Below I have added all the relevant codes.

app.module.ts:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AlertComponent } from "./AlertFolder/alert.component";


import { NativeScriptRouterModule } from "nativescript-angular/router"
import {AppRoutes, AppComponents } from "./app.routing";

@NgModule({
  declarations: [AlertComponent, ...AppComponents],
  bootstrap: [AlertComponent],
  imports: [
    NativeScriptModule,
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(AppRoutes)
    ],

  schemas: [NO_ERRORS_SCHEMA],
})

export class AppModule {}

app.routing.ts:

import { AlertComponent } from "./AlertFolder/alert.component";
import { NotificationComponent } from "./Noficiation/notification";

export const AppRoutes:any = [ 

    { path: "", component: AlertComponent },
    { path: "NotificationPage", component: NotificationComponent}
];

export const AppComponents: any = [ 

 AlertComponent,
 NotificationComponent

];

alert.component.ts:

 @Component({
 selector: "sdk-child-component",
 moduleId: module.id,
 ....
 })

export class AlertComponent   {

.....
.....
 public constructor(private router: Router, private routerExtensions: RouterExtensions){

this.alertList = [];
}


onNotification() {

     console.log("SteveCheck", "Test");
     this.router.navigate(["NotificationPage"]);

}

 }

alert.component.html:

 <StackLayout class="borders" orientation="horizontal" >
    <Label class="notification-label" text="Notification Center" ></Label>
    <Image src="res://right_arrow" stretch="none" class="right-arrow" (tap)="onNotification()"></Image>

  </StackLayout>

Answer 1

Here is an example , we can include routerLink on the img tag-

 <img src="../../../assets/images/Notification.png" [routerLink]="['/NotificationPage']" width="55%" height = "200px" class="img-responsive" style="margin-left: 220px">

Answer 2

I have to use Path folder name Notification. I have that second page NotificationComponent placed inside that Notification folder only.That's why I'm unable to navigate between pages.

By changing this :

  this.router.navigate(["NotificationPage"]);

to this:

this.router.navigate(["Notification"]);

fixed my issue

Answer 3

constructor(private routerExtensions: RouterExtensions) {
    // ...
}
this.routerExtensions.navigate(["/NotificationPage"]);