如何在角度组件中使用离子组件

Posted 2023-03-13

【中文标题】如何在角度组件中使用离子组件

【英文标题】：How to use ionic components inside angular components

【发布时间】：2019-03-19 08:19:00

【问题描述】：

问题

在离子应用程序中，我使用了两个自定义角度组件。在其中一个角度组件中，我想使用两个离子组件，<ion-icon> 和 <ion-fab> 但 ionic 抛出两个错误

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 

【参考方案1】：

我遇到了和你一样的问题，我找到了解决方法并帮助遇到同样问题的其他人。

需要在components.module.ts中导入IonicModule和CommonModule才能解决问题。

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

感谢Wils 在线程“Ionic 3 can't use ion- components inside my custom components”上的评论，我找到了解决方案