首先爆一个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导入
