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 is part of declaration of 2 modules. Conside moving higher module'

然后我将 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

我认为你需要为这个开始保持简单，你不需要创建很多模块，只需要主应用程序模块就可以了，将你的 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);

希望对您有所帮助。

Answer 2

我成功了。我在 NgModule 中缺少导出

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

Nativescript angular2 reuse componentin other component

nativescript

angular2-nativescript