如何在 app.module.ts ionic 3 / angular 中導入組件

Question

我在 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 天起一直在搜索它，但直到現在還沒有找到任何解決方案。

Answer 1

為什么要使用ComponentsModule ？ 包含組件的模塊是所謂的功能模塊。 如果在多個模塊中需要這些組件，也稱為共享模塊。 您的LoginOptionModule似乎是對功能的一個很好的描述。 但是ComponentsModule呢？ 組件聽起來不像是一個功能。 我認為，這只是一個清理結構的模塊。 但是您認為清理您的應用程序結構是否必要或有用？

考慮您在其中聲明的每個組件，是否在AppModule或LoginOptionModule聲明更好。 兩個模塊中都需要該組件嗎？

如果它是共享的，或者您絕對願意保留ComponentsModule您應該能夠將它導入AppModule和LoginOptionModule ，而無需將其導出到其中一個模塊中。 在ComponentsModule本身中聲明並導出您的組件。

希望這有助於解決您的問題。 干杯!

一些風格建議

• 將login-option-module.ts重命名為login-option.module.ts 。
• 在您的AppModule和所有其他模塊中，為每個聲明、導入等數組條目添加一個新行。
• 命名你的服務總是有用的servicename.service.ts

總之，將所有 angular 文件命名為name.service.ts 、 name.module.ts 、 name.pipe.ts等。這會產生一個非常清晰的應用程序結構。

你的代碼很難閱讀。 下次您至少可以嘗試使用語法突出顯示，方法是在代碼前放置以下內容之一，不要縮進，后跟空行。

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

還要考慮什么對解決您的問題很重要。 模板文件絕對不是。