ion-segament控制元件可以通過代碼呼叫click事件

前提：

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();
    }
  }

如果有更好的辦法請留言，謝謝，