NativeScript：未呈现的简单模板答案

【问题标题】：NativeScript: simple template not renderedNativeScript：未呈现的简单模板
【发布时间】：2018-09-18 14:46:47
【问题描述】：

通过 *ngFor 调用模板时，无论多么简单，它都不会被渲染。

component.html:

<Label text="hello world""></Label>

container.html：

<StackLayout>
    <GridLayout *ngFor="let obj of objs">
        <!-- WORKS: -->
        <Label text="hello world"></Label>
        <!-- DOES NOT WORK: -->
        <ns-component></ns-component>
    </GridLayout>
</StackLayout>

当使用 ,（简单的、非模板标签）下的 sn-p 时，对于 3 个对象的数组，我看到三行“hello world”。但是，当调用模板而不是简单的 Label 时，不会呈现任何内容。

【问题讨论】：

标签： nativescript angular2-nativescript

【解决方案1】：

确保您已在相应的模块中注册您的组件。

例如

使用选择器ns-component创建组件

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

@Component({
    selector: "ns-component",
    moduleId: module.id,
    template: '<Label text="ns-component: Some Content"></Label>',
    styleUrls: ['./item.component.css']
})
export class ItemComponent  { }

然后在加载的模块中注册组件

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptFormsModule } from "nativescript-angular/forms";

import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";

import { ItemComponent } from "./item.component"; // HERE

@NgModule({
    imports: [
        NativeScriptCommonModule,
        HomeRoutingModule,
        NativeScriptFormsModule
    ],
    declarations: [
        HomeComponent,
        ItemComponent // HERE
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class HomeModule { }

最后将它与 *ngFor 结构指令一起使用。

<StackLayout>
    <GridLayout rows="100" *ngFor="let obj of [1, 2, 3, 4]" class="cell">
        <ns-component></ns-component>
    </GridLayout>
</StackLayout>

Playground app demonstrating the above here.

【讨论】：

好吧，我现在觉得自己非常愚蠢。在仔细检查了我的组件是否是模块的一部分以及又一个小时的反复试验后，我终于注意到我的内部组件的引用模板是父组件的模板。我复制了组件并更新了选择器，但没有更新 templateUrl。复制意大利面以获得胜利。