Правильный способ манипулирования / ссылки на элементы DOM в Angular

Question

У меня есть следующий HTML-код иона-сегмента:

<ion-segment (ionChange)="segmentChanged($event)" scrollable>
    <ion-segment-button checked value="calendar">
        <ion-icon name="calendar"></ion-icon>
    </ion-segment-button>
    <ion-segment-button  value="list-box">
        <ion-icon name="list-box"></ion-icon>
    </ion-segment-button>  
</ion-segment> 

<ion-card [hidden]="true">
    test
</ion-card>
<ion-card>
    test
</ion-card>

Я хочу поменять местами, какая карта становится видимой, когда я нажимаю кнопку сегмента. Теперь я могу легко исправить это с помощью Jquery, но я хочу сделать это без JQuery.

У меня есть следующее событие, которое корректно вызывается atm:

segmentChanged(): void { console.log("I triggered") }

Каков наилучший (или хороший) способ реализации этой функциональности?

Answer 1

Вы можете подготовить свои вкладки в компоненте, отобразить их с помощью цикла for в шаблоне и сохранить в свойстве выбранной вкладки. Тогда не будет проблем с автоматическим просмотром данных.

export interface Tab {
    code: string;
    name: string;
    icon: string;
}

...

// your component ts file
tabs: Tab[] = [
    {
        code: 'first',
        name: 'First tab',
        icon: 'first-icon',
    },
    {
        code: 'second',
        name: 'Second tab',
        icon: 'second-icon',
    },
];
currentTab: Tab = tabs[0];

segmentChanged(tab: Tab): void {
    this.currentTab = tab;
}


// template html file
<ion-segment scrollable>
    <ion-segment-button *ngFor="let tab of tabs" value="calendar" (click)="segmentChanged(tab)">
        <ion-icon [name]="tab.icon"></ion-icon>
    </ion-segment-button>
</ion-segment> 

<ion-card *ngFor="let tab of tabs">
    <ng-container *ngIf="tab.code === currentTab.code">
        {{ tab.name }}
    </ng-container>
</ion-card>