Вложенный коврик в коврике

Question

Выбор мата внутри метки-флажка коварен: если я нажимаю на выбор мата, флажок также переключается.Я не хочу, чтобы это произошло ...

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

Вот рабочий пример: https://angular -7em9xn.stackblitz.io

с кодом: https://stackblitz.com/edit/angular-7em9xn

Answer 1

Добавить директиву (click-stop-spreadation.directive.ts)

@Directive({
  selector: '[appClickStopPropagation]',
})
export class ClickStopPropagationDirective {
  @HostListener('click', ['$event'])
  public onClick(event: any): void {
    event.stopPropagation();
    event.preventDefault();
  }
}

И использовать его на коврике

<mat-checkbox>Check this out! 
  <mat-select [(ngModel)]='when' appClickStopPropagation>
    <mat-option value="now">now</mat-option>
    <mat-option value="later">later</mat-option>
  </mat-select>
</mat-checkbox>

Хотя event.stopPropagation(); по какой-то причине должно хватить.