ionic3自定义segment组件

首先爆一个Bug：

极光推送收到通知，点击通知后，使用setRoot(page)方法设置导航控制器A的root页面，则A中的所有segment组件不切换。感觉上是html中动态值和ts中对应值绑定被解除了。

附：定义变量i，并使用setinterval定时器i++,，然后在前台输出{{i}}。在打开通知后，这个i还是能够定时累加输出的，并且，每次刷新都会顺带把type也刷新一遍。

上自定义segment的相关代码：

最终效果图

exx-segment.html

<div class="exxSegment">
  <a class="item" *ngFor="let item of exxoption;let i=index;" (click)="select(item,$event)" [class.segactive]="item.value==exxselect"> {{item.name}} </a>
</div>

exx-segment.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

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

export class ExxSegmentComponent {
  @Input("exxoption")
  exxoption: Array<any> = [];

  @Input("exxselect")
  exxselect: string;

  @Output("exxclick")
  exxclick: EventEmitter<string> = new EventEmitter();

  constructor() {
  }

  select(item, event) {
    // console.log(event);
    let items = event.target.parentElement.getElementsByClassName("item");
    Object.keys(items).map((key) => {
      items[key].classList.remove("segactive");
    });
    event.target.classList.add("segactive");
    this.exxclick.emit(item.value);
  }
}

exx-segment.scss

exx-segment {
    .exxSegment{ width: 100%; max-height: 100%; overflow: hidden; display: flex; display: -webkit-flex; /* Safari */ flex-direction: row; justify-content:space-around;}
    .exxSegment .item{ text-decoration: none; color: #b2b2b2; flex: 1; text-align: center; height: 80%; display: block; font-size: 1.2rem;height: 3.2rem;line-height: 3rem;}
    .exxSegment .item.segactive{ border-bottom: 2px solid #f4f4f4; color: #fff;}
}

调用方式：

1、html
<exx-segment (exxclick)="changeMode($event)" [exxoption]="dataSegment" [exxselect]="type"></exx-segment>
2、配置
  public dataSegment = [
    { name: '项目1', value: 'item1' },
    { name: '项目2', value: 'item2' }
  ];
3、exx-segment.modeule.ts导入