NativeScript 组件不显示答案

【问题标题】：NativeScript component doesn't get displayedNativeScript 组件不显示
【发布时间】：2020-05-15 09:15:29
【问题描述】：

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

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

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

“/”路由被重定向到“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>

我错过了新应用程序的默认代码的文件，但如果它很重要，我会包含它们。

【问题讨论】：

home 组件是否被延迟加载？
我不知道 :( 我将编辑帖子以添加 home.component.ts
如果你有一个home.module.ts，你可能需要将BottomNavComponent从app.module.ts的声明数组移动到home.module.ts
谢谢。这已经奏效了。这是延迟加载吗？
是的（基于您拥有的代码 sn-ps）。如果你想在另一个组件中使用一个组件，你必须要么在同一个模块中声明两个组件，要么让模块导入包含该组件的另一个模块（如果它们在单独的模块中）

标签： javascript angular nativescript nativescript-angular

【解决方案1】：

默认路由应该是“”而不是“/”，这就是你没有被重定向到主页的原因，而且你需要将你的底部导航组件移动到主页模块中。

您可以在 Nativescript 文档或市场中找到更好的示例，您可以在其中找到可以使用的模板。

【讨论】：