IONIC封装component组件（类似淘宝的Filter）

先看下效果图

 

  

实现步骤

1.新建component，执行如下指令

ionic generate component XXX (组件名称)

2.分别在app.module.ts添加引用（注意home.module.ts也需要添加引用，详细在下面有介绍）

//app.module.ts
import { XXXComponent } from '../components/XXX/XXX'

3.实现代码

 component页面(在component文件夹下有2个文件，XXX文件夹和components.module.ts文件，XXX文件夹下有hml、css和ts三个文件)

components.module.ts（添加时，已自动生成好，不需要改动）

import { NgModule } from '@angular/core';
import { TypeFilterComponent } from './type-filter/type-filter';
import { IonicModule } from 'ionic-angular';

@NgModule({
	declarations: [TypeFilterComponent],
	imports: [IonicModule],
	exports: [TypeFilterComponent]
})
export class ComponentsModule {}

XXX.html代码

<!-- Generated template for the TypeFilterComponent component -->
<ion-scroll scrollY="true" class="scroll-w-h">
  <ng-content select="[this-content]"></ng-content>
</ion-scroll>

<ng-content select="[this-footer]" class="footer-w-h"></ng-content>

XXX.css

 .scroll-w-h {
        width: 100%;
        height: 93%;
    }
      
    .footer-w-h {
        width: 100%;
        height: 7%;
        min-height: 50px;
    }

 XXX.ts（无需改动）

import { Component } from '@angular/core';

/**
 * Generated class for the TypeFilterComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'type-filter',
  templateUrl: 'type-filter.html'
})
export class TypeFilterComponent {

  constructor() {
  
  }

}

page文件夹下的home文件（4个文件html、css、module.ts、ts） 

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Filter</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="OpenTypeFilter()">
        <ion-icon name="ios-apps-outline"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<div class="type-filter" *ngIf="bolShow">
  <type-filter>
    <div this-content>
      <div class="div-margin">
        <p class="p-title">
          <span>{{titerList.titerYear}}</span>
        </p>
        <ion-row class="row-year">
          <ion-col *ngFor="let item of dateYear" class="col-year">
            <div class="div-check" *ngIf="item.Selected=== 1">
              <ion-icon name="ios-checkmark" class="icon-choose"></ion-icon>
            </div>
            <ion-label [innerHTML]="item.Name" [ngClass]="{'filters-bg':item.Selected=== 1 }"
              (click)="ChooseFilters(item)" class="lbl-year"></ion-label>
          </ion-col>
        </ion-row>
      </div>

      <div class="div-margin">
        <p class="p-title">
          <span>{{titerList.titerNews}}</span>
        </p>
        <ion-row class="row-year">
          <ion-col *ngFor="let item of typeList" class="col-year">
            <div class="div-check" *ngIf="item.Selected=== 1">
              <ion-icon name="ios-checkmark" class="icon-choose"></ion-icon>
            </div>
            <ion-label [innerHTML]="item.Name" [ngClass]="{'filters-bg':item.Selected=== 1 }"
              (click)="ChooseFilters(item)" class="lbl-year"></ion-label>
          </ion-col>
        </ion-row>
      </div>


      <div class="div-margin">
        <p class="p-title">
          <span>{{titerList.titerCountry}}</span>
        </p>
        <ion-row class="row-year">
          <ion-col *ngFor="let item of countryList" class="col-year">
            <div class="div-check" *ngIf="item.Selected=== 1">
              <ion-icon name="ios-checkmark" class="icon-choose"></ion-icon>
            </div>
            <ion-label [innerHTML]="item.Name" [ngClass]="{'filters-bg':item.Selected=== 1 }"
              (click)="ChooseFilters(item)" class="lbl-year"></ion-label>
          </ion-col>
        </ion-row>
      </div>

    </div>

    <div this-footer>
      <div class="div-btn">
        <ion-row>
          <ion-col class="col-btn"> <button ion-button icon-only (click)="ClearFilters()" class="btn-clear">取消</button></ion-col>
          <ion-col class="col-btn"> <button ion-button icon-only (click)="GetDataOfItemByMoreFilters()" class="btn-ok">确定</button></ion-col>
        </ion-row>
      </div>
    </div>
  </type-filter>
</div>

<ion-content padding>

</ion-content>

<!--遮罩层-->
<div class="cover" *ngIf="bolCover" (click)="CloseMoreFilters()">

</div>

home.css

page-goods-list {
  .p-title{
      margin: 0 0 10px;
      border-bottom: 1px solid #387ef5;

      span{
          background-color: #387ef5;
          padding: 6px 8px;
          margin: 0px 0 0 8px;
      }
  }

    .col-year{   
        width: 33.3%;
        min-width: 33.3%;
        max-width: 33.3%;
        text-align: center;
   }

   .lbl-year{
       border:1px solid #dedede;
       margin: 0;
       height: 36px;
       line-height: 36px;
       border-radius: 5px;
   }

   .div-check {
    height: 20px;
    width: 20px;
    position: absolute;
    right: 6px;
    bottom: 5px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent #387ef5 #387ef5 transparent;
    border-bottom-right-radius: 5px
  }

  .icon-choose {
    position: absolute;
    bottom: -12px;
    right: -7px;
    color: aliceblue;
  }

  .filters-bg {
    color: #387ef5;
    border-color: #387ef5;
    background-color: #dce5f3;
  }

  .row-year{
    margin-bottom: 8px;
  }

  .type-filter{
    position: absolute;
    width: 85%;
    background-color: rgb(248,248,248);
    top: 56px;
    left: 15%;
    height: 90%;
    height: calc(100% - 56px);
    z-index: 102;
  }

  .toolbar-background-md {
    background: #387ef5;
}

.cover {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 101;
  opacity: .30;
  filter: alpha(opacity=30);
}

.div-margin{
  margin-top: 16px;
}

.div-margin:last-child{
  margin-bottom: 30px;
}

.div-btn {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 2;

  ion-row {
    height: 50px;

    .button {
      height: 100%;
      border-radius: 0;
    }
  }
}

.col-btn {
  padding: 0
}

.btn-clear {
  width: 100%;
  margin: 0;
  background-color: red;
}

.btn-ok {
  width: 100%;
  margin: 0;
}
}

 home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { ComponentsModule } from '../../components/components.module'

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    ComponentsModule,
  ],
})
export class HomePageModule {}

home.ts 

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

/**
 * Generated class for the HomePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  titerList: any = [];

  dateYear: any = [];

  typeList: any = [];

  countryList: any = [];

  bolShow: boolean = false;

  appleInfo: any = [];

  bolCover: boolean = false;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.titerList = { "titerYear": "年份", "titerNews": "新闻", "titerCountry": "国家" };

    this.dateYear = [{ "Selected": 0, "Name": '2015' },
    { "Selected": 0, "Name": '2016' },
    { "Selected": 0, "Name": '2017' },
    { "Selected": 0, "Name": '2018' },
    { "Selected": 0, "Name": '2019' },
    { "Selected": 0, "Name": '2020' }];

    this.typeList = [{ "Selected": 0, "Name": '娱乐' },
    { "Selected": 0, "Name": '体育' },
    { "Selected": 0, "Name": '军事' },
    { "Selected": 0, "Name": 'NBA' },
    { "Selected": 0, "Name": '国际' },
    { "Selected": 0, "Name": '科技' },
    { "Selected": 0, "Name": '财经' },
    { "Selected": 0, "Name": '汽车' },
    { "Selected": 0, "Name": '时尚' },
    { "Selected": 0, "Name": '图片' },
    { "Selected": 0, "Name": '游戏' }];

    this.countryList = [{ "Selected": 0, "Name": '中国' },
    { "Selected": 0, "Name": '美国' },
    { "Selected": 0, "Name": '俄罗斯' },
    { "Selected": 0, "Name": '英国' },
    { "Selected": 0, "Name": '德国' },
    { "Selected": 0, "Name": '法国' },
    { "Selected": 0, "Name": '澳大利亚' },
    { "Selected": 0, "Name": '韩国' },
    { "Selected": 0, "Name": '日本' }];

    this.appleInfo = {
      "Name": "Apple/苹果 iPhone XR",
      "Type": "iPhone XR",
      "Color": "红色 珊瑚色 白色 黑色 黄色",
      "RAM": "64GB 128GB 256GB",
      "Card": "双卡双待"
    };

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
  }

  OpenTypeFilter() {
    if (this.bolShow) {
      this.bolShow = false;
      this.bolCover = false;
    } else {
      this.bolShow = true;
      this.bolCover = true;
    }
  }

  ChooseFilters(row) {
    if (row.Selected === 1) {
      row.Selected = 0;
    } else {
      row.Selected = 1;
    }
  }

  CloseMoreFilters() {
    this.bolShow = false;
    this.bolCover = false;
  }

  ClearFilters() {
    var i = 0;
    this.dateYear.forEach(val => {
      if (val.Selected === 1) {
        i += 1;
      }
      val.Selected = 0;
    });
    this.typeList.forEach(val => {
      if (val.Selected === 1) {
        i += 1;
      }
      val.Selected = 0;
    });
    this.countryList.forEach(val => {
      if (val.Selected === 1) {
        i += 1;
      }
      val.Selected = 0;
    });

    if (i === 0) {
      this.bolShow = false;
      this.bolCover = false;
    }
  }

  GetDataOfItemByMoreFilters() {
    this.bolShow = false;
    this.bolCover = false;
  }

  alertMsg(){
    alert("aaa");
  }
}