如何在角組件內使用離子組件

Question

問題

在離子應用程序中，我正在使用兩個自定義角度分量。 在一個角度分量中，我想使用兩個離子分量， <ion-icon>和<ion-fab>但是離子拋出兩個錯誤

ion-icon is not a known element

和

ion-fab is not a known element

題

如何在自定義角度組件中使用離子組件？

這是我正在使用離子成分的成分

footer.html

<div class="footer-container">
  <div class="comics-option-container">
    <img class="comics-icon" src="../../assets/imgs/grid2.png" />
    <p>Comics</p>
  </div>

  <div class="search-option-container">
    <ion-fab class="search-fab-btn-container">
      <button ion-fab class="search-btn">
          <ion-icon name="ios-search" color="white"></ion-icon>
      </button>
    </ion-fab>

    <p>Search</p>
  </div>

  <div class="edit-option-container">
    <img class="posting-icon" src="../../assets/imgs/edit1.png" />
    <p>Posting</p>
  </div>
</div>

components.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header';
import { IonicModule } from 'ionic-angular';
import { FooterComponent } from './footer/footer';
import { CommonModule } from '@angular/common';
@NgModule({
    declarations: [HeaderComponent, FooterComponent],
    imports: [IonicModule],
    exports: [HeaderComponent, FooterComponent]
})
export class ComponentsModule {}

HeaderTestPage是我正在使用此組件的頁面，下面是其模塊文件

headertest.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule, IonicModule } from 'ionic-angular';
import { HeaderComponent } from '../../components/header/header';
import { FooterComponent } from '../../components/footer/footer';
import { SharedModule } from '../../shared.module';
import { HeaderTestPage } from './headertest';

@NgModule({
  declarations: [
    HeaderTestPage
  ],
  imports: [
    IonicPageModule.forChild(HeaderTestPage),
    SharedModule
  ],
})

export class HeaderTestPageModule {}

Answer 1

我遇到了與您同樣的問題，並且找到了解決問題的方法，並幫助遇到同樣問題的其他所有人。

您需要在components.module.ts導入IonicModule和CommonModule以解決該問題。

@NgModule({
 imports: [
  CommonModule,
  IonicModule
 ],
 ...
})

我找到了解決方案，這要歸功於Wils對線程“ Ionic 3無法在自定義組件中使用離子組件”的評論。