[英]How to import component in app.module.ts ionic 3 / angular
I have created a component named common-header in ionic 3我在 ionic 3 中创建了一个名为 common-header 的组件
Now I want to include this at top of other pages like in the home page, about page etc. but my problem is that i have to include it on my each page then its working fine like i did in below given code :现在我想将此包含在其他页面的顶部,例如主页,关于页面等,但我的问题是我必须将它包含在我的每个页面上,然后它就像我在下面给出的代码中所做的那样工作正常:
//login-option-module.ts //登录选项模块.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 {}
But I want to import this "common-header" component from my app.module.ts.但我想从我的 app.module.ts 导入这个“common-header”组件。 so that it will automatically present in my all pages
以便它会自动出现在我的所有页面中
So I import this in my app.module.ts file look below codes:所以我在我的 app.module.ts 文件中导入它,看看下面的代码:
//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 {}
and removed below codes from my login-option-module.ts并从我的 login-option-module.ts 中删除了以下代码
import { ComponentsModule } from '../../components/components.module'; imports: [ ComponentsModule ], exports: [ ComponentsModule ]
after doing this i am getting below error:这样做后,我收到以下错误:
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
below is my other codes:下面是我的其他代码:
//common-header.html //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 //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);
}
}
//login-option.html //登录选项.html
<ion-header>
<common-header ></common-header>
</ion-header>
<ion-content class="login-content" >
page login
</ion-content>
Is there any way to solve my problem i am searching it since 3 days but did't find any solution till yet.有什么办法可以解决我的问题,我从 3 天起一直在搜索它,但直到现在还没有找到任何解决方案。
Why do you use a ComponentsModule
?为什么要使用
ComponentsModule
? A module containing components is a so called feature module.包含组件的模块是所谓的功能模块。 If you need these components in multiple modules, it's also called shared module.
如果在多个模块中需要这些组件,也称为共享模块。 Your
LoginOptionModule
seems to be a good description for a feature .您的
LoginOptionModule
似乎是对功能的一个很好的描述。 But what about ComponentsModule
?但是
ComponentsModule
呢? Components doesn't sound like a feature.组件听起来不像是一个功能。 It's just a module to clean up your structure, I think.
我认为,这只是一个清理结构的模块。 But do you think it's necessary or useful in order to have your apps structure cleaned up?
但是您认为清理您的应用程序结构是否必要或有用?
Think about each component you declare in it whether it wouldn't be better to declare in the AppModule
or in the LoginOptionModule
.考虑您在其中声明的每个组件,是否在
AppModule
或LoginOptionModule
声明更好。 Is the component required in both modules?两个模块中都需要该组件吗?
If it's shared or you are definitely willing to keep the ComponentsModule
you should be able to import it in both, the AppModule
and LoginOptionModule
, without exporting it in one of the modules.如果它是共享的,或者您绝对愿意保留
ComponentsModule
您应该能够将它导入AppModule
和LoginOptionModule
,而无需将其导出到其中一个模块中。 In the ComponentsModule
itself declare and export your components.在
ComponentsModule
本身中声明并导出您的组件。
Hopefully this helps fixing your issues.希望这有助于解决您的问题。 Cheers!
干杯!
Some style advises一些风格建议
AppModule
and all other modules give each declaration-, imports-, etc. array entry a new line.AppModule
和所有其他模块中,为每个声明、导入等数组条目添加一个新行。 In conclusion name all angular files as name.service.ts , name.module.ts , name.pipe.ts , etc. This results in a very clear app structure.总之,将所有 angular 文件命名为name.service.ts 、 name.module.ts 、 name.pipe.ts等。这会产生一个非常清晰的应用程序结构。
Your code is hard to read.你的代码很难阅读。 Next time you could at least try using syntax highlighting by placing one of the following in front of your code without indentation followed by an empty line.
下次您至少可以尝试使用语法突出显示,方法是在代码前放置以下内容之一,不要缩进,后跟空行。
<!-- language: lang-html -->
<!-- language: javascript -->
Also think about what is important for solving your problem.还要考虑什么对解决您的问题很重要。 The template files definitely aren't.
模板文件绝对不是。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.