ion-segament控件可以通过代码调用click事件
程序员文章站
2022-06-23 09:14:26
前提:entrypage.html主容器的header 配置segament用于tab切换,主容器里面的content嵌套了好几个tab,然后这个tab里面有子组件。需要通过代码调用segament的点击事件。
前提:
entrypage.html主容器的header 配置segament用于tab切换,主容器里面的content嵌套了好几个tab,然后这个tab里面有子组件。需要通过代码调用segament的点击事件。
<ion-header *ngIf="titleBar && titleBar!=={} "
[ngClass]="{'isHeight': !isHeader, 'header-orange': titleBar.cssStyle === 'orange','header-white': titleBar.cssStyle === 'white'}"
translucent="false">
<ion-toolbar id="superToolbar"
[ngClass]="{'isShow': isHeader,'isHide':!isHeader,'bg-image':showWaterImg, 'title-orange': titleBar.cssStyle === 'orange','title-transparent': titleBar.cssStyle === 'transparent','title-white': titleBar.cssStyle === 'white','bottom-line': (titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ) && titleBar.bottomLine !== false }">
<ng-container *ngIf="titleBar.title && (!titleBar.title.layout || titleBar.title.layout === 'center')">
<ion-title class="nav-title" *ngIf="titleBar.title">{{titleBar.title.labelName}}</ion-title>
</ng-container>
<ng-container *ngIf="titleBar.title && titleBar.title.layout === 'left'">
<ion-buttons slot="start" class="start" class="nav-title nav-title-left">
{{titleBar.title.labelName}}
</ion-buttons>
</ng-container>
<ion-buttons class="nav-title nav-position" style="height: 2.75rem;" *ngIf="titleBar.position" slot="start"
class="start" (click)="buttonClick(titleBar.position.link)">
<span id="identityCityName" *ngIf="positionInfo && positionInfo.name">{{positionInfo.name}} </span>
<i class="triangle-icon"></i>
</ion-buttons>
<!-- search box -->
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<div (click)="searchButtonClick(titleBar.searchInput,$event)">
<ion-searchbar class="search-bar" *ngIf="titleBar.searchInput"
placeholder={{titleBar.searchInput.placeholder}} value={{titleBar.searchInput.value}} mode="ios">
</ion-searchbar>
</div>
<!-- <img class="header-icon-img" src="../../../assets/img/nav_search.png" alt="search"> -->
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<div (click)="searchButtonClick(titleBar.searchInput)">
<ion-searchbar class="search-bar search-bar-orange" *ngIf="titleBar.searchInput"
placeholder={{titleBar.searchInput.placeholder}} mode="ios"></ion-searchbar>
</div>
<!-- <img class="header-icon-img" src="../../../assets/img/nav_search_white@3x.png" alt="search"> -->
</ng-container>
<!-- search btn -->
<ng-container *ngIf="titleBar.searchButton">
<ng-container *ngIf="titleBar.searchButton.layout==='left'">
<ion-buttons slot="start" class="start" (click)="searchButtonClick(titleBar.searchButton)">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" src="../../../assets/img/nav_search.png" alt="search">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/img/nav_search_white@3x.png" alt="search">
</ng-container>
<span
[ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.searchButton.labelName}}</span>
</ion-buttons>
</ng-container>
<ng-container *ngIf="titleBar.searchButton.layout==='right'">
<ion-buttons slot="end" class="end" (click)="searchButtonClick(titleBar.searchButton)">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img-r" src="../../../assets/img/nav_search.png" alt="search">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img-r" src="../../../assets/img/nav_search_white@3x.png" alt="search">
</ng-container>
<span
[ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.searchButton.labelName}}</span>
</ion-buttons>
</ng-container>
</ng-container>
<ng-container *ngIf="titleBar.back">
<ng-container *ngIf="titleBar.back.layout==='left'">
<ion-buttons slot="start" class="start" (click)="back()">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" style="margin-right: 0px;" src="../../../assets/img/back.png"
alt="back">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/img/nav_icon_back_white@3x.png" alt="back">
</ng-container>
</ion-buttons>
</ng-container>
<ng-container *ngIf="titleBar.back.layout==='right'">
<ion-buttons slot="end" class="end" (click)="back()">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img-r" src="../../../assets/img/back.png" alt="back">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img-r" src="../../../assets/img/nav_icon_back_white@3x.png" alt="back">
</ng-container>
</ion-buttons>
</ng-container>
</ng-container>
<!-- add call btn : -->
<ng-container *ngIf="titleBar.call">
<ng-container *ngIf="titleBar.call.layout==='left'">
<ion-buttons slot="start" class="start" (click)="call(titleBar.call)">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" src="../../../assets/icon/nav_icon_tel@3x.png" alt="call">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/icon/nav_icon_tel_white@3x.png" alt="call">
</ng-container>
</ion-buttons>
</ng-container>
<ng-container *ngIf="titleBar.call.layout==='right'">
<ion-buttons slot="end" class="end" (click)="call(titleBar.call)">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img-r" src="../../../assets/icon/nav_icon_tel@3x.png" alt="call">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img-r" src="../../../assets/icon/nav_icon_tel_white@3x.png" alt="call">
</ng-container>
</ion-buttons>
</ng-container>
</ng-container>
<!-- add chat btn : -->
<ng-container *ngIf="titleBar.chat">
<ng-container *ngIf="titleBar.chat.layout==='left'">
<ion-buttons slot="start" class="start" (click)="chat(titleBar.chat)">
<img class="header-icon-img" src="../../../assets/icon/{{titleBar.chat.icon}}" alt="chat">
<!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" src="../../../assets/icon/details_icon_chat@3x.png" alt="chat">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/icon/details_icon_chat_w@3x.png" alt="chat">
</ng-container> -->
</ion-buttons>
</ng-container>
<ng-container *ngIf="titleBar.chat.layout==='right'">
<ion-buttons slot="end" class="end" (click)="chat(titleBar.chat)">
<img class="header-icon-img-r" src="../../../assets/icon/{{titleBar.chat.icon}}" alt="chat">
<!--
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" src="../../../assets/icon/details_icon_chat@3x.png" alt="chat">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/icon/details_icon_chat_w@3x.png" alt="chat">
</ng-container> -->
</ion-buttons>
</ng-container>
</ng-container>
<!-- add more btn : -->
<ng-container *ngIf="titleBar.moreLine">
<ng-container *ngIf="titleBar.moreLine.layout==='left'">
<ion-buttons slot="start" class="start" (click)="moreLine(titleBar.moreLine)">
<img class="header-icon-img" src="../../../assets/icon/{{titleBar.moreLine.icon}}" alt="moreLine">
<!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" src="../../../assets/icon/nav_icon_more@3x.png" alt="moreLine">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/icon/nav_icon_more_w@3x.png" alt="moreLine">
</ng-container> -->
</ion-buttons>
</ng-container>
<ng-container *ngIf="titleBar.moreLine.layout==='right'">
<ion-buttons slot="end" class="end" (click)="moreLine(titleBar.moreLine)">
<img class="header-icon-img-r" src="../../../assets/icon/{{titleBar.moreLine.icon}}" alt="moreLine">
<!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" src="../../../assets/icon/nav_icon_more@3x.png" alt="moreLine">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/icon/nav_icon_more_w@3x.png" alt="moreLine">
</ng-container> -->
</ion-buttons>
</ng-container>
</ng-container>
<!-- add filter btn : -->
<ng-container *ngIf="titleBar.filter">
<ng-container *ngIf="titleBar.filter.layout==='left'">
<ion-buttons slot="start" class="start" (click)="filter(titleBar.filter)">
<img class="header-icon-img" src="../../../assets/img/{{titleBar.filter.icon}}" alt="chat">
<!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" src="../../../assets/icon/nav_search@3x.png" alt="filter">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/icon/nav_search_white@3x.png" alt="filter">
</ng-container> -->
</ion-buttons>
</ng-container>
<ng-container *ngIf="titleBar.filter.layout==='right'">
<ion-buttons slot="end" class="end" (click)="filter(titleBar.filter)">
<img class="header-icon-img-r" src="../../../assets/img/{{titleBar.filter.icon}}" alt="chat">
<!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" src="../../../assets/icon/nav_search@3x.png" alt="filter">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/icon/nav_search_white@3x.png" alt="filter">
</ng-container> -->
</ion-buttons>
</ng-container>
</ng-container>
<!-- textButton 确定 提价表单用的 -->
<ng-container *ngIf="titleBar.textButton">
<ng-container *ngIf="titleBar.textButton.layout==='left'">
<ion-buttons slot="start" class="start titleBar-right-box" (click)="textButton(titleBar.textButton)">
<span class="titleBar-textBtn">{{titleBar.textButton.label}}</span>
</ion-buttons>
</ng-container>
<ng-container *ngIf="titleBar.textButton.layout==='right'">
<ion-buttons slot="end" class="end titleBar-right-box" (click)="textButton(titleBar.textButton)">
<span class="titleBar-textBtn">{{titleBar.textButton.label}}</span>
</ion-buttons>
</ng-container>
</ng-container>
<!-- iconButton 数组形式最终可能是用这个替代所以的图标 btn -->
<ng-container *ngIf="titleBar.iconButton && titleBar.iconButton.length">
<ng-container *ngFor="let item of titleBar.iconButton">
<ng-container *ngIf="item.layout==='left'">
<ion-buttons slot="start" class="start" (click)="iconButtonClick(item)">
<img class="header-icon-img" src="../../../assets/icon/{{item.icon}}" alt="iconButton">
<!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" src="../../../assets/icon/nav_search@3x.png" alt="iconButton">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/icon/nav_search_white@3x.png" alt="iconButton">
</ng-container> -->
</ion-buttons>
</ng-container>
<ng-container *ngIf="item.layout==='right'">
<ion-buttons slot="end" class="end" (click)="iconButtonClick(item)">
<img class="header-icon-img-r" src="../../../assets/icon/{{item.icon}}" alt="iconButton">
<!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" src="../../../assets/icon/nav_search@3x.png" alt="iconButton">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/icon/nav_search_white@3x.png" alt="iconButton">
</ng-container> -->
</ion-buttons>
</ng-container>
</ng-container>
</ng-container>
<!-- toggleButton -->
<ng-container *ngIf="titleBar.toggleButton && titleBar.toggleButton.length === 2">
<ion-title>
<div style="padding-top: 0.13rem;">
<div class="nav-toggle-bg">
<div class="toggle-left" [ngClass]="{'toggle-check': titleBar.toggleButton[0].checked}"
(click)="toggle(titleBar.toggleButton, 0)">{{titleBar.toggleButton[0].label}}</div>
<div class="toggle-right" [ngClass]="{'toggle-check': titleBar.toggleButton[1].checked}"
(click)="toggle(titleBar.toggleButton, 1)">{{titleBar.toggleButton[1].label}}
<div *ngIf="titleBar.hasNew && titleBar.hasNew !== '0' " class="toggle-right-new"></div>
</div>
</div>
</div>
</ion-title>
<!-- todo: -->
<!-- <ng-container *ngIf="titleBar.textButton.layout==='right'">
<ion-buttons slot="end" class="end" (click)="textButton(titleBar.textButton)">
<span [ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.textButton.label}}</span>
</ion-buttons>
</ng-container> -->
</ng-container>
<ng-container *ngIf="appTypeCustom==='LJ'">
<!-- add favorite btn-->
<ng-container *ngIf="titleBar.favorite">
<ng-container *ngIf="titleBar.favorite.layout==='left'">
<ion-buttons slot="start" class="start" (click)="favorite(titleBar.favorite.submit)">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
<img class="header-icon-img"
src="../../../assets/icon/nav_icon_collection_normal@3x.png" alt="favorite">
</ng-container>
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
<img class="header-icon-img"
src="../../../assets/icon/nav_icon_collection_white_nor@3x.png" alt="favorite">
</ng-container>
</ng-container>
<ng-container *ngIf="titleBar.favorite.icon === 'favorite'">
<img class="header-icon-img" src="../../../assets/icon/nav_icon_collection_pre@3x.png"
alt="favorite">
</ng-container>
</ion-buttons>
</ng-container>
<ng-container *ngIf=" titleBar.favorite.layout==='right'">
<ion-buttons slot="end" class="end" (click)="favorite(titleBar.favorite.submit)">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
<img class="header-icon-img-r"
src="../../../assets/icon/nav_icon_collection_normal@3x.png" alt="favorite">
</ng-container>
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
<img class="header-icon-img-r"
src="../../../assets/icon/nav_icon_collection_white_nor@3x.png" alt="favorite">
</ng-container>
</ng-container>
<ng-container *ngIf="titleBar.favorite.icon === 'favorite'">
<img class="header-icon-img-r" src="../../../assets/icon/nav_icon_collection_pre@3x.png"
alt="favorite">
</ng-container>
</ion-buttons>
</ng-container>
</ng-container>
<!-- add share btn-->
<ng-container *ngIf="titleBar.share">
<ng-container *ngIf="titleBar.share.layout==='left'">
<ion-buttons slot="start" class="start" (click)="share(titleBar.share.link)">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" src="../../../assets/icon/nav_icon_share@3x.png" alt="share">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/icon/nav_icon_share_white@3x.png"
alt="share">
</ng-container>
</ion-buttons>
</ng-container>
<ng-container *ngIf="titleBar.share.layout==='right'">
<ion-buttons slot="end" class="end" (click)="share(titleBar.share.link)">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img-r" src="../../../assets/icon/nav_icon_share@3x.png" alt="share">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img-r" src="../../../assets/icon/nav_icon_share_white@3x.png"
alt="share">
</ng-container>
</ion-buttons>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="appTypeCustom!='LJ'">
<!-- add share btn-->
<ng-container *ngIf="titleBar.share">
<ng-container *ngIf="titleBar.share.layout==='left'">
<ion-buttons slot="start" class="start" (click)="share(titleBar.share.link)">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img" src="../../../assets/icon/nav_icon_share@3x.png" alt="share">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img" src="../../../assets/icon/nav_icon_share_white@3x.png"
alt="share">
</ng-container>
</ion-buttons>
</ng-container>
<ng-container *ngIf="titleBar.share.layout==='right'">
<ion-buttons slot="end" class="end" (click)="share(titleBar.share.link)">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<img class="header-icon-img-r" src="../../../assets/icon/nav_icon_share@3x.png" alt="share">
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<img class="header-icon-img-r" src="../../../assets/icon/nav_icon_share_white@3x.png"
alt="share">
</ng-container>
</ion-buttons>
</ng-container>
</ng-container>
<!-- add favorite btn-->
<ng-container *ngIf="titleBar.favorite">
<ng-container *ngIf="titleBar.favorite.layout==='left'">
<ion-buttons slot="start" class="start" (click)="favorite(titleBar.favorite.submit)">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
<img class="header-icon-img"
src="../../../assets/icon/nav_icon_collection_normal@3x.png" alt="favorite">
</ng-container>
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
<img class="header-icon-img"
src="../../../assets/icon/nav_icon_collection_white_nor@3x.png" alt="favorite">
</ng-container>
</ng-container>
<ng-container *ngIf="titleBar.favorite.icon === 'favorite'">
<img class="header-icon-img" src="../../../assets/icon/nav_icon_collection_pre@3x.png"
alt="favorite">
</ng-container>
</ion-buttons>
</ng-container>
<ng-container *ngIf=" titleBar.favorite.layout==='right'">
<ion-buttons slot="end" class="end" (click)="favorite(titleBar.favorite.submit)">
<ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined ">
<ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
<img class="header-icon-img-r"
src="../../../assets/icon/nav_icon_collection_normal@3x.png" alt="favorite">
</ng-container>
</ng-container>
<ng-container *ngIf="titleBar.cssStyle === 'orange'">
<ng-container *ngIf="titleBar.favorite.icon === 'unfavorite'">
<img class="header-icon-img-r"
src="../../../assets/icon/nav_icon_collection_white_nor@3x.png" alt="favorite">
</ng-container>
</ng-container>
<ng-container *ngIf="titleBar.favorite.icon === 'favorite'">
<img class="header-icon-img-r" src="../../../assets/icon/nav_icon_collection_pre@3x.png"
alt="favorite">
</ng-container>
</ion-buttons>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="titleBar.cancel">
<ng-container *ngIf="titleBar.cancel.layout==='left'">
<ion-buttons slot="start" class="start" (click)="back()">
<span
[ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.cancel.labelName}}</span>
</ion-buttons>
</ng-container>
<ng-container *ngIf="titleBar.cancel.layout==='right'">
<ion-buttons slot="end" class="end" (click)="back()">
<span
[ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.cancel.labelName}}</span>
</ion-buttons>
</ng-container>
</ng-container>
<ng-container *ngIf="titleBar.close">
<ng-container *ngIf="titleBar.close.layout==='left'">
<ion-buttons slot="start" class="start" (click)="close()">
<img class="header-icon-img" src="../../../assets/img/close.png" alt="back">
</ion-buttons>
</ng-container>
<ng-container *ngIf="titleBar.close.layout==='right'">
<ion-buttons slot="end" class="end" (click)="close()">
<img class="header-icon-img-r" src="../../../assets/img/close.png" alt="back">
</ion-buttons>
</ng-container>
</ng-container>
<ng-container *ngIf="titleBar.discounts">
<ng-container *ngIf="titleBar.discounts.layout==='left'">
<ion-buttons slot="start" class="start" (click)="buttonClick(titleBar.discounts.link)">
<img class="header-icon-img" src="../../../assets/img/activity@3x.png" alt="discounts">
</ion-buttons>
</ng-container>
<ng-container *ngIf="titleBar.discounts.layout==='right'">
<ion-buttons slot="end" class="end" (click)="buttonClick(titleBar.discounts.link)">
<img class="header-icon-img-r" src="../../../assets/img/activity@3x.png" alt="discounts">
</ion-buttons>
</ng-container>
</ng-container>
</ion-toolbar>
<ion-toolbar *ngIf="showTopTab" style="--padding-bottom:0px;padding-left: 0px;padding-right: 0px;" id="homeTopTab">
<!-- <ul class="ulTopTab">
<li *ngFor="let item of tagData.data;let i=index;" id="homeNavTab{{i}}"
[ngClass]="{'active': tagData.currentTab === item.indexTab}" [ngStyle]="{'width': aWidth}"
(click)="change(item,item.indexTab)">
<span>{{item.label}}</span>
</li>
</ul> -->
<div id="HometopSegment">
<ion-segment #segment (ionChange)="segmentChanged($event)" [(ngModel)]="selectedSegment"
[scrollable]="true">
<ion-segment-button id="hometopSegmentBtn{{i}}" *ngFor="let item of tagData.data;let i=index;" [value]="i">
<span>{{item.label}}</span>
<div class="bar"></div>
</ion-segment-button>
</ion-segment>
</div>
<hr style="width: 100%;height: 0.04rem;background-color: #EBEBED;">
</ion-toolbar>
通过子组件页面的声明周期监听处理点击事件:
// tslint:disable-next-line:use-life-cycle-interface
ngAfterViewChecked(): void {
let currentTabStr = 'hometopSegmentBtn';
if (this.tagData && this.tagData.currentTab) {
currentTabStr += this.tagData.currentTab;
} else {
currentTabStr += '0';
}
if (document.getElementById(currentTabStr)) {
const firstBtn = document.getElementById(currentTabStr);
firstBtn.click();
}
}
如果有更好的办法请留言,谢谢。
本文地址:https://blog.csdn.net/u012381782/article/details/110728558