Запретить расширение при нажатии на основной нг аккордеон

Question

У меня есть основной аккордеон, а в заголовке аккордеона есть флажок.Всякий раз, когда я ставлю / снимаю флажок, вкладка аккордеона открывается / закрывается автоматически

Есть ли способ предотвратить расширение / сворачивание при нажатии на флажок?Он должен разворачиваться / сворачиваться в заголовке, кроме флажка «снять / снять флажок»?

Answer 1

Это происходит из-за Event Bubbling .Для этого необходимо остановить EventPropagation, вызвав stopPropagation() из MouseEvent.

Пример HTML-кода для аккордеона

<p-accordion>
    <p-accordionTab header="Godfather I" [selected]="true">
        <p-header>
            <span>Godfather I
              <input type="checkbox" (click)="onClick($event)">
            </span>
        </p-header>
        Some Text
    </p-accordionTab>
</p-accordion>

Соответствующий компонент TS-код.

onClick($event: MouseEvent){
    $event.stopPropagation();
}

Для справки добавлено stackblitz пример кода.

Answer 2

Вот как я решил эту проблему.Это происходит из-за Event Bubbling.Поэтому, когда вы нажимаете на дочерний элемент.Событие распространяется на его родителя и так далее.Так что просто используйте остановку распространения на событие.Это предотвратит событие щелчка на вашем аккордеоне.Ниже приведен код для вашей справки.

Аккордеон с кодом флажка Я использовал (onChange) метод.

<p-accordionTab>
    <p-header>
      <div class="ui-g" style="width:250px;margin-bottom:10px">
        <div class="ui-g-12"><p-checkbox name="group1" #ck value="New York" label="New York" [(ngModel)]="selectedCities" (onChange)="checkChange($event)" inputId="ny"></p-checkbox></div>
        </div>
  </p-header>
  </p-accordionTab>

component.ts

selectedCities: string[] = [];
//Simply you have to to stop propogation here. 
checkChange(e:any){
        console.log(e); // true or false.
        event.stopPropagation(); // component will have direct access to event here.
}