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>