weui-tabbar中跳转时会触发所有tabs的select事件

[gdtdpt]

我在一个页面写了一个weui-tabbar包含三个tab，其中第二个tab会在select事件时向后端请求一个耗时1秒多的数据，然后我发现如果我在第一tab的包含的component里执行一个router的跳转，会触发后面所有tab的select事件，这样导致我在第一个tab里所有跳转事件都会先执行第二tab的select事件进行耗时操作再跳转，直接表现就是卡顿非常严重。

经过测试我发现在某个tab内跳转时会顺序向后调用tab的select事件，比如有三个tab(tab1/tab2/tab3)，tab1中跳转会调用tab2，tab3的select事件，tab2中跳转就会调用tab3的select事件，tab3中跳转不会调用其余的select事件。

想请问如何能让非tab点击事件时不执行select事件？

我用的是1.1.0版，因为项目中用的angular是^4.0.0版本，你的组件依赖更新得非常激进，我们担心升级依赖会带来不可预料错误，所以如果有什么方法能解决这个问题，请告诉我，而不是让我更新到最新版本，谢谢。

<weui-tabbar>
        <weui-tab heading="tab1" (select)="tabOneSelect()">
            <component-one></component-one>
        </weui-tab>
        <weui-tab heading="tab2" (select)="tabTwoSelect(/*这里会触发耗时操作*/)">
            <component-two></component-two>
        </weui-tab>
        <weui-tab heading="tab3" (select)="tabThreeSelect()">
             <component-three></component-three>
        </weui-tab>
</weui-tabbar>

[cipchk]

请提供一个可重现示例。

[gdtdpt]

@cipchk 我认为我的描述已经够清楚了，伪代码也贴在上面了。这是你要的示例。
用法：

• 点击tab1中的To Other Page就可以看到现象了。
• 如果你有兴趣，可以点tab2中的To Other Page观察我说的向后触发的现象。

[to0simple]

我也碰到了这种情况 跳转别的页面 会出发每个tab的select事件 楼主解决了吗

[gdtdpt]

@love-YY 我的做法是覆盖原有的指令

import { Directive, OnDestroy } from '@angular/core';
import { BarComponent, TabDirective } from 'ngx-weui';

@Directive({ selector: 'my-weui-tab, [my-weui-tab]' })
export class RWTabDirective extends TabDirective implements OnDestroy {
    constructor(tab: BarComponent) {
        super(tab);
    }

    ngOnDestroy(): void {
        // 覆盖TabDirective的ngOnDestroy方法
    }

}

<weui-tabbar>
    <my-weui-tab></my-weui-tab>
</weui-tabbar>

这样就不会触发其他事件了

[to0simple]

为啥我这边输入不能继承 我记得input是可以继承的

[gdtdpt]

@love-YY 我的是可以继承，不过我用的是比较旧的1.2.0版本，不清楚会不会是后续版本这个类有改动

[to0simple]

okay,我用的最新版也可以了。这继承子类还得重新写输入输出
import {Directive,OnDestroy,Input,Output,EventEmitter,HostBinding} from "@angular/core";
import {TabDirective,BarComponent} from "ngx-weui";
@directive({
selector: 'my-weui-tab, [my-weui-tab]',
exportAs:'my-weui-tab'
})
export class MyWeuiTabDirective extends TabDirective implements OnDestroy{
@input() heading: string;
@input() disabled: boolean;
@input() icon: string;
@input() badge: number | 'dot';
@output() select: EventEmitter = new EventEmitter();
@output() deselect: EventEmitter = new EventEmitter();
@output() removed: EventEmitter = new EventEmitter();
@HostBinding('class.active')
@input()
get active(): boolean {
return this._active;
}
set active(active: boolean) {
if ((this.disabled && active) || !active) {
if (!active) {
this._active = active;
}
this.deselect.emit(this);
return;
}
this._active = active;
this.select.emit(this);
this._tabComp.tabs.forEach((tab: MyWeuiTabDirective) => {
if (tab !== this) {
tab.active = false;
}
});
}
constructor(tab:BarComponent) {
super(tab);
}
ngOnDestroy():void{
}

}