Nativescript angular 2 在另一个组件中重用组件

Question

我正在使用 angular2 和 typescript 开发 nativescript 应用程序。

我有 imageComponentA、pageComponentB、pageComponentC 和它们的模块（imageModuleA、pageModuleB、pageModuleC）。

pageModuleB, pageModuleC 是路由中的页面。 imageModuleA 是图像（只是<Image src="src"></Image>）。

如果我在 pageModuleB 中声明 imageModuleA，如下所示。 应用显示 imageModuleA 没有问题。

类似的东西

main.ts
    import { AppModule } from "./app.module";
    platformNativeScriptDynamic().bootstrapModule(AppModule);

app.module  (top module) 
    NgModule
        imports [pageModuleB, pageModuleC] 

pageModuleB
    NgModule
        declarations [imageComponentA] 
pageModuleC
    NgModule
        declarations [] 

然后我也想在 pageModuleC 中重用 imageModuleA。 如果我在 pageModuleC 的模块中声明 imageModuleA，它会说“imageComponentA 是 2 个模块声明的一部分。考虑移动更高的模块'

然后我将 imageModuleA 上移一层到 app.module 并从 pageModuleB、pageModuleC 中删除声明

app.module (top module) 
    NgModule
        imports [pageModuleB, pageModuleC] 
        declarations [imageComponentA]

pageModuleB
    NgModule
        declarations [] 
pageModuleC
    NgModule
        declarations [] 

它编译并运行应用程序，但 imageComponentA 没有显示。

我认为这是简单的 angular2 NgModule 的事情。 我做错了什么？

---

更新 1

我也尝试在 app.module 中导入 imageModuleA

main.ts
    import { AppModule } from "./app.module";
    platformNativeScriptDynamic().bootstrapModule(AppModule);

app.module (top module) 
    NgModule
        imports [imageModuleA, pageModuleB, pageModuleC] 
        declarations []

pageModuleB
    NgModule
        declarations [] 
pageModuleC
    NgModule
        declarations [] 

Answer 1

我设法让它工作。我在 NgModule 中缺少导出

Answer 2

我认为你需要保持简单开始，你不需要创建很多模块，主应用模块就可以了，将你的 3 个组件添加到应用模块声明数组中。

查看下面相同的代码和输出的屏幕截图

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic, NativeScriptModule } from "nativescript-angular/platform";
import { NgModule, Component } from "@angular/core";

@Component({
    selector: "app-image",
    template: `<Image width="250" src="https://d2odgkulk9w7if.cloudfront.net/images/default-source/home/ns-angular-javascript-typescript.png?sfvrsn=2"></Image>
    `,
})
export class ImageComponent {
}

@Component({
    selector: "my-app",
    template: `
    <StackLayout>
    <app-image></app-image>
    <Label text="Tap the button" class="title"></Label>

    <Button text="TAP" (tap)="onTap()"></Button>

    <Label [text]="message" class="message" textWrap="true"></Label>
</StackLayout>`,
})
export class AppComponent {
    public counter: number = 16;

    public get message(): string {
        if (this.counter > 0) {
            return this.counter + " taps left";
        } else {
            return "Hoorraaay! \nYou are ready to start building!";
        }
    }

    public onTap() {
        this.counter--;
    }
}

@NgModule({
    declarations: [AppComponent, ImageComponent],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule],
})
class AppComponentModule {}

platformNativeScriptDynamic().bootstrapModule(AppComponentModule);

我希望这会有所帮助。