无法使用NativeScript路由

Question

我是Angular和NativeScript的新手，正在尝试制作一个应用程序。我已经创建了我的第一个页面，但我不太清楚如何路由。我尝试路由到的页面是我的signInComponent。这就是我所拥有的：

我的app-routing.module.ts

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

const routes: Routes = [
    { path: "", redirectTo: "/home", pathMatch: "full" },
    { path: "home", loadChildren: "./home/home.module#HomeModule" },
    { path: "signIn", loadChildren: "./signIn/signIn.module#SignInModule" }

];

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

我的按钮，它在home.component.html中

​

<Button class="btn btn-primary btn-rounded-sm" style="width: 90%; height: 7%; padding: 0px; margin-top: 75%; margin-bottom: 5px; background-color: black; color: white; vertical-align: bottom;" text="Sign In" (tap)=onSignIn()></Button>

​

我的home.component.ts中的onSignIn()函数

onSignIn(): void { 
    this.router.navigate(['signIn']);
}

这是我的signIn-routing.model.ts

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

import { SignInComponent } from "./signIn.component";

const routes: Routes = [
    { path: "", component: SignInComponent }
];

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

我的signIn.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
    selector: "SignIn",
    moduleId: module.id,
    templateUrl: "./signIn.component.html",
    styleUrls: ['./signIn.component.css']
})
export class SignInComponent implements OnInit {
    onButtonTap(): void {
        console.log("Button was pressed");
    }


    constructor() {}

    ngOnInit(): void {}
}

下面是我的signIn.module.ts：

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
import { NativeScriptUICalendarModule } from "nativescript-ui-calendar/angular";
import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";
import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
import { NativeScriptUIAutoCompleteTextViewModule } from "nativescript-ui-autocomplete/angular";
import { NativeScriptUIGaugeModule } from "nativescript-ui-gauge/angular";
import { NativeScriptFormsModule } from "nativescript-angular/forms";

import { SignInRoutingModule } from "./signIn-routing.module";
import { SignInComponent } from "./signIn.component";

@NgModule({
    imports: [
        NativeScriptUISideDrawerModule,
        NativeScriptUIListViewModule,
        NativeScriptUICalendarModule,
        NativeScriptUIChartModule,
        NativeScriptUIDataFormModule,
        NativeScriptUIAutoCompleteTextViewModule,
        NativeScriptUIGaugeModule,
        NativeScriptCommonModule,
        SignInRoutingModule,
        NativeScriptFormsModule
    ],
    declarations: [
        SignInComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class SignInModule { }

如有任何帮助，将不胜感激，谢谢！

Answer 1

我自己对Nativescript/Angular比较陌生，但在设计其他组件时，我可以在不为单个组件声明.module.ts和.model.ts文件的情况下过活。我不确定这是否是最佳实践(如果不是，我将非常高兴得到纠正)，但是尝试导入SignInComponent并将其添加到app.module.ts文件的declarations数组中，并在app.routing.ts文件中作为路由添加。