Question

我在ionic 3

中创建了一个名为common-header的组件

现在我想把它包含在主页，关于页面等其他页面的顶部。但我的问题是我必须将它包含在我的每个页面然后它的工作正常，就像我在下面给出的代码：

//登录选项-module.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 {}

但我想导入这个＆＃34; common-header＆＃34;我的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 {}

并从我的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

以下是我的其他代码：

//共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>

//共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);
  }
}

//登录-option.html

 <ion-header>
    <common-header ></common-header>
  </ion-header>


<ion-content class="login-content" >
    page login
  </ion-content>

有没有办法解决我的问题，我从3天开始搜索它，但到目前为止还没找到任何解决方案。

Answer 1

为什么使用ComponentsModule？包含组件的模块是所谓的特征模块。如果您需要在多个模块中使用这些组件，它也称为共享模块。您的LoginOptionModule似乎是对功能的良好描述。但是ComponentsModule呢？组件听起来不像是一个功能。我认为，它只是一个清理结构的模块。但是，为了清理您的应用程序结构，您认为它是必要的还是有用的？

考虑您在其中声明的每个组件，在AppModule或LoginOptionModule中声明是否更好。两个模块都需要组件吗？

如果它已共享，或者您肯定愿意保留ComponentsModule，那么您应该能够同时导入AppModule和LoginOptionModule，在其中一个模块中导出。在ComponentsModule本身声明并导出您的组件。

希望这有助于解决您的问题。干杯！

某些风格建议

将 login-option-module.ts 重命名为 login-option.module.ts 。
在您的AppModule和所有其他模块中，为每个声明，导入等数组输入一个新行。
始终为您的服务命名 usefulservicename.service.ts

总之，将所有角度文件命名为 name.service.ts ， name.module.ts ， name.pipe.ts 等这导致了一个非常清晰的应用程序结构。

您的代码很难阅读。下次你至少可以尝试使用语法高亮显示，方法是在代码前面放置以下内容之一，不要缩进，后面跟一个空行。

<!-- language: lang-html -->
<!-- language: javascript -->

还要考虑解决问题的重要性。模板文件肯定不是。

如何在app.module.ts中导入组件ionic 3 / angular

1 个答案: