ionic3 入门【2】 创建组件

创建组件
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页面显示