Question

我正在用NativeScript编写我的第一个应用程序，并且我不太熟悉前端开发。我刚刚开始，并创建了一个带有两个按钮的简单第一个屏幕。当按下一个按钮时，它应该导航到另一个屏幕。我已经根据基本教程添加了Route，但是现在该应用程序根本不显示任何内容。我不确定如何调试问题或查看任何日志/错误可以帮助我找出问题出在哪里。这是我的代码：

app.routing.module.ts

onCalculateSize

home-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.component.html

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.ts

<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>

app.modules.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 {
    }
}

Answer 1

您在AppComponent模板（html）中缺少<router-outlet></router-outlet>。 Official doc也请参考此link

Answer 2

这个答案是我的解决方案： Component is not part of any NgModule or the module has not been imported into your module

我在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 { }

当我按下按钮时，导航仍然不起作用，但是至少该应用正在启动。

添加路由后启动时的NativeScript白屏

2 个答案: