NativeScript组件未显示

Question

我是NativeScript应用程序开发的新手，我将尝试描述整个情况，希望您能再次帮助我找到解决方案。

根据我的PHP经验，现在我想为应用程序的每个“页面”创建一个模板。该模板将具有部分模板（侧面抽屉，操作栏，内容和底部导航），这些模板必须出现在每个页面上。

我开始将底部导航作为一个组件来实现，我试图将其显示在我的home组件中，但是没有显示出来。

“ /”路由重定向到“ home”。这是代码：

app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BottomNavComponent } from './bottom-nav/bottom-nav.component';

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

app.component.html

<page-router-outlet></page-router-outlet>

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

@Component({
    selector: "Home",
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

    constructor() {
        // Use the component constructor to inject providers.
    }

    ngOnInit(): void {
        // Init your component properties here.
    }
}

home.component.html

<ActionBar>
    <Label text="Title"></Label>
</ActionBar>
<StackLayout>
    <label text="Content before"></label>
    <ns-bottom-nav></ns-bottom-nav>
    <label text="Content after"></label>
</StackLayout>

bottom-nav.component.ts

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

@Component({
    moduleId: module.id,
    selector: 'ns-bottom-nav',
    templateUrl: './bottom-nav.component.html',
    styleUrls: ['./bottom-nav.component.css']
})
export class BottomNavComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

bottom-nav.component.html

<Button text="bottom-nav works!" class="btn btn-primary"></Button>

我错过了带有新应用程序默认代码的文件，但是如果重要的话，我将包括它们。

Answer 1

默认路由应该是“”而不是“ /”，这就是为什么您不被重定向到home的原因，并且您还需要在home模块内移动底部的nav组件。

您可以在Nativescript文档或市场上找到一个更好的示例，在这里您可以找到可以使用的模板。