Nativescript angular2在其他组件中重用组件
我正在用angular2和typescript开发nativescript应用程序 我有imageComponentA、pageComponentB、pageComponentC及其模块(imageModuleA、pageModuleB、pageModuleC) pageModuleB、pageModuleC是路由中的页面。 imageModuleA是图像(只是Nativescript angular2在其他组件中重用组件,nativescript,angular2-nativescript,Nativescript,Angular2 Nativescript,我正在用angular2和typescript开发nativescript应用程序 我有imageComponentA、pageComponentB、pageComponentC及其模块(imageModuleA、pageModuleB、pageModuleC) pageModuleB、pageModuleC是路由中的页面。 imageModuleA是图像(只是) 如果我在pageModuleB中声明imageModuleA,如下所示。 应用程序显示imageModuleA没有问题 像这样的 m
)
如果我在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是两个模块声明的一部分。考虑移动更高的模块'
然后我将imageModuleA向上移动了一层到app.module,并删除了pageModuleB、pageModuleC中的去极化
app.module (top module)
NgModule
imports [pageModuleB, pageModuleC]
declarations [imageComponentA]
pageModuleB
NgModule
declarations []
pageModuleC
NgModule
declarations []
它编译并运行应用程序,但不显示imageComponentA
我认为这是一件简单的事情。
我做错了什么
更新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 []
我认为你需要保持简单的开始,你不需要创建很多模块,只是主应用程序模块是好的,添加你的3个组件到应用程序模块声明数组 请参见下面相同的代码和输出的屏幕截图
//为了加载一些必需的设置(如globals和reflect元数据),应该首先导入
从“nativescript/platform”导入{platformNativeScriptDynamic,NativeScriptModule};
从“@angular/core”导入{NgModule,Component};
@组成部分({
选择器:“应用程序图像”,
模板:`
`,
})
导出类ImageComponent{
}
@组成部分({
选择器:“我的应用程序”,
模板:`
`,
})
导出类AppComponent{
公共柜台:号码=16;
公共获取消息():字符串{
如果(this.counter>0){
返回此计数器+“向左轻敲”;
}否则{
返回“万岁!\n您已经准备好开始建造!”;
}
}
公共onTap(){
这个柜台;
}
}
@NGD模块({
声明:[AppComponent,ImageComponent],
引导:[AppComponent],
导入:[NativeScriptModule],
})
类AppComponentModule{}
platformNativeScriptDynamic().bootstrapModule(AppComponentModule);
我希望这能帮上忙。我设法让它工作起来了。我在NgModule中丢失了导出也许为了能够访问模块,您应该在
main.ts
文件中声明它们,如图所示-我将此库用作上游。它在main中导入AppModule。ts@NikolayTsonev更新问题尝试在声明中添加三个组件:imageComponentA
,pageComponentB
,pageComponentC
应用程序模块。关于这一点,它将有帮助,如果你能提供样本项目。我创建了样本项目在这里,如果我评论了这一行,并在这一行的评论图像出现。谢谢。我同意一开始就保持简单
。我设法使它运转起来。我在NGM模块中缺少导出