![](/img/trans.png)
[英]Ionic error while trying to import DatePicker into app.module.ts
[英]How to import component in app.module.ts ionic 3 / angular
我在 ionic 3 中创建了一个名为 common-header 的组件
现在我想将此包含在其他页面的顶部,例如主页,关于页面等,但我的问题是我必须将它包含在我的每个页面上,然后它就像我在下面给出的代码中所做的那样工作正常:
//登录选项模块.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginOptionPage } from './login-option';
import { ComponentsModule } from '../../components/components.module';
@NgModule({
declarations: [
LoginOptionPage,
],
imports: [
ComponentsModule,
IonicPageModule.forChild(LoginOptionPage),
],
exports: [
ComponentsModule
]
})
export class LoginOptionPageModule {}
但我想从我的 app.module.ts 导入这个“common-header”组件。 以便它会自动出现在我的所有页面中
所以我在我的 app.module.ts 文件中导入它,看看下面的代码:
//app.module.ts
import { HomePage } from '../pages/home/home';
import { ServiceProvider } from '../providers/service/service';
import { Tab1Page } from '../pages/tab1/tab1';
import { Tab2Page } from '../pages/tab2/tab2';
import { CandidateProvider } from '../providers/candidate/candidate';
import { ComponentsModule } from '../components/components.module';
@NgModule({
declarations: [
MyApp,
HomePage,
],
imports: [
BrowserModule,HttpModule,ComponentsModule,
IonicModule.forRoot(MyApp),
],
exports: [
ComponentsModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [ ServiceProvider,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
CandidateProvider
]
})
export class AppModule {}
并从我的 login-option-module.ts 中删除了以下代码
import { ComponentsModule } from '../../components/components.module'; imports: [ ComponentsModule ], exports: [ ComponentsModule ]
这样做后,我收到以下错误:
Error: Uncaught (in promise): Error: Template parse errors:
'common-header' is not a known element:
1. If 'common-header' is an Angular component, then verify that it is part of this module.
2. If 'common-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<ion-header>
[ERROR ->]<common-header ></common-header>
</ion-header>
"): ng:///LoginOptionPageModule/LoginOptionPage.html@1:4
下面是我的其他代码:
//common-header.html
<ion-navbar hideBackButton>
<nav>
<img class="logo left" src="assets/imgs/logo-icon-rev.png" />
<h1 class="slogan left">hoteljobber.com</h1>
</nav>
<a style="color:aqua; float:right" on-click="homeClick()">Back to home</a>
</ion-navbar>
//common-header.ts
import { Component,Input } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../../pages/home/home';
@Component({
selector: 'common-header',
templateUrl: 'common-header.html'
})
export class CommonHeaderComponent {
header_data: any;
constructor(public navCtrl: NavController) {}
@Input()
set header(header_data: any) {
this.header_data=header_data;
}
get header() {
return this.header_data;
}
homeClick() {
this.navCtrl.setRoot(HomePage);
}
}
//登录选项.html
<ion-header>
<common-header ></common-header>
</ion-header>
<ion-content class="login-content" >
page login
</ion-content>
有什么办法可以解决我的问题,我从 3 天起一直在搜索它,但直到现在还没有找到任何解决方案。
为什么要使用ComponentsModule
? 包含组件的模块是所谓的功能模块。 如果在多个模块中需要这些组件,也称为共享模块。 您的LoginOptionModule
似乎是对功能的一个很好的描述。 但是ComponentsModule
呢? 组件听起来不像是一个功能。 我认为,这只是一个清理结构的模块。 但是您认为清理您的应用程序结构是否必要或有用?
考虑您在其中声明的每个组件,是否在AppModule
或LoginOptionModule
声明更好。 两个模块中都需要该组件吗?
如果它是共享的,或者您绝对愿意保留ComponentsModule
您应该能够将它导入AppModule
和LoginOptionModule
,而无需将其导出到其中一个模块中。 在ComponentsModule
本身中声明并导出您的组件。
希望这有助于解决您的问题。 干杯!
一些风格建议
AppModule
和所有其他模块中,为每个声明、导入等数组条目添加一个新行。总之,将所有 angular 文件命名为name.service.ts 、 name.module.ts 、 name.pipe.ts等。这会产生一个非常清晰的应用程序结构。
你的代码很难阅读。 下次您至少可以尝试使用语法突出显示,方法是在代码前放置以下内容之一,不要缩进,后跟空行。
<!-- language: lang-html -->
<!-- language: javascript -->
还要考虑什么对解决您的问题很重要。 模板文件绝对不是。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.