ion

前提：

entrypage.html主容器的header 配置gament用于tab切换，主容器里面的content嵌套了好几个tab,然后这个tab里面有子组件。需要通过代码调用gament的点击事件。

<ion-header *ngIf="titleBar && titleBar!=={} "[ngClass]="{'isHeight': !isHeader, 'header-orange': titleBar.cssStyle === 'orange','header-white': titleBar.cssStyle === 'white'}"translucent="fal"><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 !== fal }"><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><!-- arch box --><ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined "><div (click)="archButtonClick(titleBar.archInput,$event)"><ion-archbar class="arch-bar" *ngIf="titleBar.archInput"placeholder={{titleBar.archInput.placeholder}} value={{titleBar.archInput.value}} mode="ios"></ion-archbar></div><!-- <img class="header-icon-img" src="../../../asts/img/nav_arch.png" alt="arch"> --></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><div (click)="archButtonClick(titleBar.archInput)"><ion-archbar class="arch-bar arch-bar-orange" *ngIf="titleBar.archInput"placeholder={{titleBar.archInput.placeholder}} mode="ios"></ion-archbar></div><!-- <img class="header-icon-img" src="../../../asts/img/nav_arch_white@3x.png" alt="arch"> --></ng-container><!-- arch btn --><ng-container *ngIf="titleBar.archButton"><ng-container *ngIf="titleBar.archButton.layout==='left'"><ion-buttons slot="start" class="start" (click)="archButtonClick(titleBar.archButton)"><ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined "><img class="header-icon-img" src="../../../asts/img/nav_arch.png" alt="arch"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/img/nav_arch_white@3x.png" alt="arch"></ng-container><span[ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.archButton.labelName}}</span></ion-buttons></ng-container><ng-container *ngIf="titleBar.archButton.layout==='right'"><做网站优化ion-buttons slot="end" class="end" (click)="archButtonClick(titleBar.archButton)"><ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined "><img class="header-icon-img-r" src="../../../asts/img/nav_arch.png" alt="arch"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img-r" src="../../../asts/img/nav_arch_white@3x.png" alt="arch"></ng-container><span[ngClass]="{'button-orange': titleBar.cssStyle === 'orange','button-white': titleBar.cssStyle === 'white'}">{{titleBar.archButton.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="../../../asts/img/back.png"alt="back"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/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="../../../asts/img/back.png" alt="back"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img-r" src="../../../asts/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(titleB采购员ar.call)"><ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined "><img class="header-icon-img" src="../../../asts/icon/nav_icon_tel@3x.png" alt="call"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/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="../../../asts/icon/nav_icon_tel@3x.png" alt="call"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img-r" src="../../../asts/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="../../../asts/icon/{{titleBar.chat.icon}}" alt="chat"><!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined "><img class="header-icon-img" src="../../../asts/icon/details_icon_chat@3x.png" alt="chat"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/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="../../../asts/icon/{{titleBar.chat.icon}}" alt="chat"><!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined "><img class="header-icon-img" src="../../../asts/icon/details_icon_chat@3x.png" alt="chat"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/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="../../../asts/icon/{{titleBar.moreLine.icon}}" alt="moreLine"><!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined "><img class="header-icon-img" src="../../../asts/icon/nav_icon_more@3x.png" alt="moreLine"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/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="../../../asts/icon/{{titleBar.moreLine.icon}}" alt="moreLine"><!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined "><img class="header-icon-img" src="../../../asts/icon/nav_icon_more@3x.png" alt="moreLine"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/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="../../../asts/img/{{titleBar.filter.icon}}" alt="chat"><!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined "><img class="header-icon-img" src="../../../asts/icon/nav_arch@3x.png" alt="filter"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/icon/nav_arch_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="../../../asts/img/{{titleBar.filter.icon}}" alt="chat"><!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined "><img class="header-icon-img" src="../../../asts/icon/nav_arch@3x.png" alt="filter"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/icon/nav_arch_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="../../../asts/icon/{{item.icon}}" alt="iconButton"><!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined "><img class="header-icon-img" src="../../../asts/icon/nav_arch@3x.png" alt="iconButton"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/icon/nav_arch_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="../../../asts/icon/{{item.icon}}" alt="iconButton"><!-- <ng-container *ngIf="titleBar.cssStyle === 'white' || titleBar.cssStyle === undefined "><img class="header-icon-img" src="../../../asts/icon/nav_arch@3x.png" alt="iconButton"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/icon/nav_arch_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="../../../asts/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="../../../asts/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="../../../asts/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="../../../asts/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="../../../asts/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="../../../asts/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="../../../asts/icon/nav_icon_share@3x.png" alt="share"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/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="../../../asts/icon/nav_icon_share@3x.png" alt="share"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img-r" src="../../../asts/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="../../../asts/icon/nav_icon_share@3x.png" alt="share"></ng-container><ng-container *ngIf="titleBar.cssStyle === 'orange'"><img class="header-icon-img" src="../../../asts/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="../../../asts/icon/nav_icon_share@3x.png" alt="share"></ng-container><ng-container *ngIf="titleBar.css楚乔传分集剧情介绍Style === 'orange'"><img class="header-icon-img-r" src="../../../asts/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="../../../asts/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="../../../asts/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="../../../asts/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="../../../asts/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="../../../asts/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="../../../asts/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.clo"><ng-container *ngIf="titleBar.clo.layout==='left'"><ion-buttons slot="start" class="start" (click)="clo()"><img class="header-icon-img" src="../../../asts/img/clo.png" alt="back"></ion-buttons></ng-container><ng-container *ngIf="titleBar.clo.layout==='right'"><ion-buttons slot="end" class="end" (click)="clo()"><img class="header-icon-img-r" src="../../../asts/img/clo.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="../../../asts/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="../../../asts/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-gment #gment (ionChange)="gmentChanged($event)" [(ngModel)]="lectedSegment"[scrollable]="true"><ion-gment-button id="hometopSegmentBtn{{i}}" *ngFor="let item of tagData.data;let i=index;" [value]="i"><span>{{item.label}}</span><div class="bar"></div></ion-gment-button></ion-gment></div><hr style="width: 100%;height: 0.04rem;background-color: #EBEBED;"></ion-toolbar>

通过子组件页面的声明周期监听处理点击事件：

  // tslint:disable-next-line:u-life-cycle-interfacengAfterViewChecked(): void {let currentTabStr = 'hometopSegmentBtn';if (this.tagData && this.tagData.currentTab) {currentTabStr += this.tagData.currentTab;} el {currentTabStr += '0';}if (document.getElementById(currentTabStr)) {const firstBtn = document.getElementById(currentTabStr);firstBtn.click();}}

如果有更好的办法请留言，谢谢。

本文地址：https://blog.csdn.net/u012381782/article/details/110728558