ionic3 入门【2】创建组件

水深无声 2022-06-02 04:58 226阅读 0赞

创建组件  
ionic g component   actionsheet （actionsheet为组件名称）  
默认的components.modules.ts会引入组件

这个组件在哪里使用就在哪里的HTML写上<actionsheet></actionsheet> 即可

如在about.html中

<ion-content padding>
      引入actionsheet组件
      <actionsheet></actionsheet>
    </ion-content>

//使用组件

在actionsheet.ts

export class ActionsheetComponent {
      text: string;
      public list=[];
      constructor() {
      //初始化
        console.log('Hello ActionsheetComponent Component');
        this.text = 'Hello World';
    
    
        for(var i=0; i< 10; i++) {
          this.list.push('这是第'+i+'条数据');
        }
      }
    }

在actionsheet.html

<div>
      {
      {
      text}}
    </div>
    actionsheet 组件
    <div>
      <ul>
        <li *ngFor="let item of list">
          {
      {
      item}}
        </li>
      </ul>
    </div>

要使用actionsheet组件 需要在app.modules.ts引入  
//引入components模块

import { ComponentsModule } from '../components/components.module';

imports: [//引入的模块 依赖的模块
      BrowserModule,
      ComponentsModule,//components模块
      IonicModule.forRoot(MyApp)
    ],

保存执行 之后可能会出现ngFor的错误 是因为components.modules.ts没有引入BrowserModule  
需要在components.modules.ts中引入BrowserModule

import { BrowserModule } from '@angular/platform-browser';

之后再运行就可以使用ngFor

最后about页面显示

![20180104133758087][]

[20180104133758087]: /images/20220602/17798eb325f648dab2f257e9d04a8a3c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关【Ionic入门】Ionic 列表

看过Ionic官网的,都知道Ionic有成型的CSS文档和JS文档. 对于初学者来说,帮助文档是最好的学习材料. 在刚接触Ionic和AngularJS的时候,基本的东西都不

缺乏、安全感/ 2022年07月28日 00:08/ 0 赞/ 209 阅读

相关【Ionic入门】-Ionic简介

![Center][] Ionic介绍: [ Ionic][I_onic]是一个强大的混合式/hybrid HTML5移动开发框架，特点是使用标准的HTML、CSS和J

太过爱你忘了你带给我的痛/ 2022年07月27日 14:42/ 0 赞/ 263 阅读

相关 ionic3 入门【1】创建Ionic项目及基本配置

制作手机app基本配置要创建Ionic项目，您需要安装最新版本的CLI和Cordova。 npm install -g ionic cordova 完成之后，创建第一

深碍√TFBOYSˉ_/ 2022年06月03日 09:49/ 0 赞/ 489 阅读

相关 ionic3 入门【2】创建组件

创建组件 ionic g component actionsheet （actionsheet为组件名称）默认的components.modules.ts会引入组

水深无声/ 2022年06月02日 04:58/ 0 赞/ 227 阅读

相关 ionic3 入门【3】实现页面跳转

一。页面跳转 (home页跳转到news页) 在home.html中定义一个按钮 <button ion-button (click)="goNews()" >跳

亦凉/ 2022年06月02日 04:51/ 0 赞/ 292 阅读

相关【ionic3】ionic2.x与ionic3.x之间的部分区别

转载自：[https://www.jianshu.com/p/2b79c541c891][https_www.jianshu.com_p_2b79c541c891] col

谁借莪１个温暖的怀抱￠/ 2022年05月29日 12:27/ 0 赞/ 211 阅读

相关 ionic3降级 ionic2打开之前的项目

因为需要参考之前的项目，之前的项目是ionic1.3.4做的，无奈现在都到ionic3了，之前的ionic项目完全启动不了。各种错误。不过还好花费了我半天的宝贵的时间终于解

梦里梦外;/ 2022年05月21日 09:07/ 0 赞/ 216 阅读

相关【组件篇】ionic3开源组件

原文出处：[https://blog.csdn.net/df981011512/article/details/79473405][https_blog.csdn.net_df

落日映苍穹つ/ 2022年05月18日 10:53/ 0 赞/ 338 阅读

相关 Ionic跨平台项目（八）ionic2、ionic3命令大全

原文出处：[https://blog.csdn.net/gaoqinghuadage/article/details/73168264][https_blog.csdn.net

Love The Way You Lie/ 2022年05月16日 23:41/ 0 赞/ 295 阅读

相关 ionic3入门

ionic3入门 ionic简介 ionic 是一个强大的HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework)，可以帮助

小咪咪/ 2022年05月10日 00:20/ 0 赞/ 458 阅读