Не могу маршрутизировать используя NativeScript - PullRequest
Новая
       9

Не могу маршрутизировать используя NativeScript

0 голосов
/ 03 июля 2018

Я довольно новичок в Angular и NativeScript и пытаюсь создать приложение. Моя первая страница создана, но я не могу понять, как проложить маршрут. Страница, на которую я пытаюсь перейти, - моя signInComponent. Вот что у меня есть:

my 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 { }

my 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 { }

любая помощь будет принята с благодарностью, спасибо!

1 Ответ

0 голосов
/ 03 июля 2018

Я относительно новичок в Nativescript / Angular, но при разработке других компонентов я смог обойтись без объявления файлов .module.ts и .model.ts для отдельных компонентов. Я не уверен, что это лучшая практика (и если нет, я был бы более чем счастлив исправить), но попробуйте импортировать и добавить свой SignInComponent в массив declarations вашего app.module.ts файл и как маршрут в вашем app.routing.ts файле.

...