Onclick 图像移动另一个页面不起作用答案

【问题标题】：Onclick image to move another page is not workingOnclick 图像移动另一个页面不起作用
【发布时间】：2017-06-01 06:12:52
【问题描述】：

我是 nativescript 的新手。我正在从警报页面导航到导航页面。我已经发布了所有相关代码。请检查它。
我没有遇到任何问题。执行图像 onClick 时，我可以调用此方法 onNotification()。
我可以在命令提示符中看到此控制台登录

console.log("SteveCheck", "Test");
但我不知道，为什么它没有移动到通知页面时点击警报页面中的按钮。下面我已经添加了所有相关代码。

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>

【问题讨论】：

标签： angular2-routing nativescript angular2-nativescript

【解决方案1】：

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

【讨论】：

我认为有些事情跨越了路由的线程。路线前是否有任何系统警报

【解决方案2】：

我必须使用路径文件夹名称通知。我将第二页 NotificationComponent 仅放在该 Notification 文件夹中。这就是我无法在页面之间导航的原因。

通过改变这个：

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

到这里：

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

解决了我的问题

【讨论】：

【解决方案3】：

这是一个例子，我们可以在img标签上包含routerLink-

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

【讨论】：