Компонент повторного использования Nativescript angular2 в другом компоненте

Я разрабатываю приложение нативного скрипта с angular2 и typescript.

У меня есть imageComponentA, pageComponentB, pageComponentC и их модули (imageModuleA, pageModuleB, pageModuleC).

pageModuleB, pageModuleC — страницы в пути. imageModuleA — это изображение (просто <Image src="src"></Image>).

Если я объявлю imageModuleA внутри pageModuleB, как показано ниже. Приложение отображает 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 []

Затем я хочу повторно использовать imageModuleA и в pageModuleC. Если я объявляю imageModuleA в модуле pageModuleC, он говорит: «imageComponentA является частью объявления двух модулей. Рассмотрите возможность перемещения более высокого модуля'

Затем я переместил 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

Я также попытался импортировать imageModuleA в app.module.

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 []

nativescript angular2-nativescript
person matar    schedule 05.10.2016    source источник
comment
Возможно, чтобы получить доступ к модулям, вы должны объявить их внутри файла main.ts, как показано здесь — github.com/tsonevn/NGModalView_question38835363/blob/master/app/   -  person Nikolay Tsonev    schedule 05.10.2016
comment
Я использую эту библиотеку как восходящую. github.com/NativeScript/sample-Groceries Он импортирует AppModule внутри main.ts   -  person matar    schedule 05.10.2016
comment
@NikolayTsonev обновил вопрос   -  person matar    schedule 05.10.2016
comment
Попробуйте добавить в declarations три компонента: imageComponentA, pageComponentB, pageComponentC app.module. В связи с этим будет полезно, если вы предоставите образец проекта.   -  person Nikolay Tsonev    schedule 05.10.2016
comment
Я создал пример проекта здесь github.com/matart15/sample-Grossery/commit/ Если я закомментирую эту строку github/matart155. /commit/ и прокомментируйте эту строку github.com/ Появится изображение matart15/sample-Grossery/commit/.   -  person matar    schedule 05.10.2016
comment
Хорошо, я решил, что @NgModule exports[] отсутствует.   -  person matar    schedule 05.10.2016

Ответы (2)


arrow_upward
1
arrow_downward

Мне удалось заставить его работать. Мне не хватало экспорта в NgModule

person matar    schedule 06.10.2016

arrow_upward
0
arrow_downward

Я думаю, вам нужно быть простым для этого начала, вам не нужно создавать много модулей, достаточно только основного модуля приложения, добавьте свои 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);

Надеюсь, это поможет.

person KielSoft    schedule 05.10.2016
comment
Спасибо. Я согласен с keep simple for the start. Мне удалось заставить его работать. Мне не хватало экспорта в NgModule - person matar; 06.10.2016