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>

我的onSignIn()函数，位于我的home.component.ts中：

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导入并添加到{您的declarations文件，并作为您app.module.ts文件中的路由。

无法使用NativeScript进行路由

1 个答案: