Белый экран NativeScript при запуске после добавления маршрутизации - PullRequest
Новая
       1

Белый экран NativeScript при запуске после добавления маршрутизации

0 голосов
/ 12 октября 2018

Я пишу свое первое приложение на NativeScript, и я не слишком знаком с интерфейсной разработкой.Я только начал, и создал простой первый экран с двумя кнопками.При нажатии на кнопку следует перейти на другой экран.Я добавил маршрут на основе базового учебника, но теперь приложение просто ничего не показывает.Я не уверен, как я могу отладить проблему или увидеть любой журнал / ошибку, которая может помочь мне выяснить, где проблема.Вот мой код:

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" },

];

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

home-routing-module.ts 

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

import { HomeComponent } from "./home.component";
import { MathComponent } from "../math/math.component";

const routes: Routes = [
    { path: "", component: HomeComponent },
    { path: "math", component: MathComponent }
];

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

export const navigatableComponents = [
    MathComponent
];

home.component.html 

<GridLayout>
    <ScrollView class="page">
        <StackLayout class="home-panel">
            <Label textWrap="true" text="Test" class="h2 description-label"></Label>
            <Button text="Math" (tap)="onMathTap()"></Button>
        </StackLayout>
     </ScrollView>
</GridLayout>

home.component.ts 

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

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
 export class HomeComponent implements OnInit {

    onMathTap(): void {
        console.log("Math was pressed");
        this.router.navigate(["/math"])
    }


    constructor(private router: Router) { }

    ngOnInit(): void {
    }
}

app.modules.ts 

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

Этот ответ стал для меня решением: Компонент не является частью какого-либо NgModule или модуль не был импортирован в ваш модуль

Я добавил в home.module.tsкомпоненты, к которым я хочу перейти в объявлениях NgModules. 

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 { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
import { MathComponent } from "../math/math.component";

@NgModule({
    imports: [
        NativeScriptUISideDrawerModule,
        NativeScriptUIListViewModule,
        NativeScriptUICalendarModule,
        NativeScriptUIChartModule,
        NativeScriptUIDataFormModule,
        NativeScriptUIAutoCompleteTextViewModule,
        NativeScriptUIGaugeModule,
        NativeScriptCommonModule,
        HomeRoutingModule,
        NativeScriptFormsModule
    ],
    declarations: [
        HomeComponent,
        MathComponent,
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class HomeModule { }

Навигация при нажатии кнопки все еще не работает для меня, но, по крайней мере, приложение запускается.

0 голосов
/ 12 октября 2018

вам не хватает <router-outlet></router-outlet> в вашем шаблоне AppComponent (html). Официальный документ см. Ссылку также

...