Nativescript angular2重用組件在其他組件

我正在開發使用angular2和typescript的nativescript應用程序。Nativescript angular2重用組件在其他組件

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

然後我想在pageModuleC重用imageModuleA了。如果我在pageModuleC模塊中聲明imageModuleA，它說'imageComponentA是2個模塊聲明的一部分。求索朝着更高模塊」

然後我移動imageModuleA一層高達app.module和從pageModuleB除去declarion，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 []

來源

2016-10-05 matar

也許能夠訪問模塊，您應該在'main.ts'文件中聲明它們，因爲它已經在這裏顯示 - https://github.com/tsonevn/NGModalView_question38835363/blob/master /app/main.ts –

我正在使用這個庫作爲上游。 https://github.com/NativeScript/sample-Groceries 它在main.ts裏導入AppModule – matar

@NikolayTsonev更新了問題 – matar

我設法讓它工作。我錯過了NgModule中的導出

來源

2016-10-06 07:55:27 matar

我認爲你需要保持簡單的這個開始，你不需要創建大量的模塊，只是主應用程序模塊沒問題，將你的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);

我希望這有助於截圖。

來源

2016-10-05 14:28:32 KielSoft

謝謝。我同意'保持簡單的開始'。我設法讓它工作。我錯過了NgModule中的導出 – matar

Nativescript angular2重用組件在其他組件

回答

相關問題