Блог

У меня есть компонент вкладки из угловых материалов, и я хотел бы применить специальное визуальное поведение, когда вкладка фокусируется (обычно с помощью вкладки).

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

Я понимаю, что класс css для удаления строки вкладки-это .mat-ink-bar, и он должен быть чем-то похожим на это.

 mat-tab-group {
    mat-ink-bar.mat-ink-bar {
        display: none;
    }
}
 

Я обнаруживаю событие фокусировки на CSS, используя этот css:

 .mat-tab-label {
    amp;:focus {
        background-color: transparent !important;
        color: red !important;
    }
}       
 

И, наконец, сгенерированный html из компонента angular materials (или, по крайней мере, важной части) является

 <mat-tab-group class="mat-tab-group mat-primary ng-star-inserted">

    <mat-tab-header class="mat-tab-header">
        <div class="mat-tab-label-container">
            <div class="mat-tab-list" role="tablist" style="transform: translateX(0px);">
                <div class="mat-tab-labels">
                    <div cdkmonitorelementfocus="" class="mat-tab-label mat-focus-indicator mat-ripple mat-tab-label-active">
                        <div class="mat-tab-label-content">General</div>
                    </div>
                </div>
                
                <mat-ink-bar class="mat-ink-bar" style="visibility: visible; left: 0px; width: 160px;"></mat-ink-bar>
            </div>
        </div>
    
    </mat-tab-header>

</mat-tab-group>    
 

Проблема в том, что я не нахожу способа связать оба класса, чтобы применить поведение (добавить/удалить панель с чернилами), поскольку оба div напрямую не связаны, и кажется, что поведение невозможно для него на CSS.

Я пытаюсь сделать это на угловой стороне, чтобы добавить класс css в div-панель с чернилами (и применить правильный стиль для этого нового класса css), но когда я добавил прослушиватель для определения фокуса, это событие не обнаружено для вкладки (оно запускается для других элементов ввода, но не для вкладки).

 @HostListener('focusin', ['$event'])
    public onFocus(event:any) {
        console.log(event);
    } 
 

Есть какое-нибудь решение?