ionic自定义组件

简单暴力ionic自定义组件教程。

目录结构（src）

编写组件

展开Components文件夹，先看mynavbar文件夹。

• mynavbar.html

<div>
    <i (click)="goBack()"><img src="assets/svg/jiantou.svg" alt=""></i> {{ _title }}
</div>

• mynavbar.scss

my-navbar {
    div {
        width: 100vw;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        background: #fff;
        color: #333;
        border-bottom: 1px solid #eee;
        text-align: center;
        position: relative;
        i {
            width: 24px;
            height: 24px;
            position: absolute;
            left: 10px;
            top: 8px;
        }
    }
}

• mynavbar.ts

import { Component, Input } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'my-navbar',
  templateUrl: 'mynavbar.html'
})

export class MyNavbarComponent {
  public _title: string = '';

  @Input()
  set title(title: string) {
    this._title = title;
  }

  constructor(
        public navCtrl: NavController
    ) {}

    public goBack() {
        this.navCtrl.pop();
    }
}

关于@Input和@Output请查看官方文档，或自行查询。

• mynavbar.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MyNavbarComponent } from './mynavbar';

@NgModule({
  declarations: [
    MyNavbarComponent,
  ],

  imports: [
    IonicPageModule.forChild(MyNavbarComponent),
  ],

  exports: [
    MyNavbarComponent
  ]
})

export class MyNavbarModule {}

导出模块

看一下Components文件夹下的components.module.ts:

import { NgModule } from '@angular/core';
import { MyNavbarModule } from './mynavbar/mynavbar.module';

@NgModule({
    declarations: [
    ],

    imports: [
        MyNavbarModule
    ],

    exports: [
        MyNavbarModule
    ]
})

export class ComponentsModule {}

在app.module.ts中声明自定义的组件

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

import { CityProvider } from '../providers/city-provider';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    ComponentsModule,  // 在这里声明
    IonicModule.forRoot(MyApp, {
      tabsHideOnSubPages: true
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

使用自定义组件

以homepage为例，在home.html中这样使用：

<my-navbar title="切换城市"></my-navbar>