Проблема с событием щелчка по угловому мату-сайту-сайту-контенту

Question

Когда я положил clickсобытие на коврике-сайде nav-content <mat-sidenav-content (click)="isNavBarOpened=false">В mat-slide-toggle внутри не работает.

Вот пример

Answer 1

Добавьте $event.stopPropagation() в компонент переключения слайдов-мат, чтобы событие не всплывало.

<mat-slide-toggle (click)="$event.stopPropagation()"></mat-slide-toggle>

Разветвленный пример

Answer 2

Прослушайте событие изменения и соответствующим образом переключите логическое значение.

https://stackblitz.com/edit/angular-cvlqrt-qjc44x

Answer 3

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

Я предполагаю, что переход к функции добавляет дополнительные циклы ЦП, и эта задержка устраняет проблему. Но это всего лишь предположение и открыто для объяснений со стороны экспертов.

      <mat-sidenav-content (click)="closeNavBar()">

closeNavBar() {
this.isNavBarOpened=false;
}

Разветвленный пример