Ionic 自定义组件中使用 Ionic 官方组件

Posted 2020-10-31 RexfieldVon

问题起因：

　　在项目目录中使用 ionic g component SearchBar 加入一个新的自定义组件并在 html 中插入代码：

1 <div>
2   <ion-searchbar
3     [(ngModel)]="myInput"
4     showCancelButton="true"
5     placeholder="输入代码或简称"
6   ></ion-searchbar>
7 </div>

　　此时运行报错 ion-searchbar is not a known elements。经过一翻搜索之后找到可行的解决方案如下：

　　在 components.module.ts 的头部加入：

1 import { BrowserModule } from "@angular/platform-browser";
2 import { IonicModule } from "ionic-angular";

　　然后在 NgModule 的 imports 段中加入：

1 BrowserModule, IonicModule.forRoot(SearchbarComponent)

　　然后保存好再重新运行，即可看到正确的结果。

原文参考地址：http://www.ionic.wang/article-index-id-113.html