각진 소재 매트 메뉴가 닫히지 않게 하는 방법은?

각진 소재 매트 메뉴가 닫히지 않게 하는 방법은?

나는 각진 재료로 날짜 선택기 컨트롤을 만들고 있고 그것을 하기 위해 아래 코드를 가지고 있습니다.

<button mat-button [matMenuTriggerFor]="menu">
    <mat-icon>date_range</mat-icon>
    <span>Date Range</span>
</button>
<mat-menu #menu="matMenu">
    <div fxLayout="row">
        <div fxLayout="column">
            <button (click)="setInterval(15)" mat-menu-item>Last 15 minutes</button>
            <button (click)="setInterval(360)" mat-menu-item>Last 6 hours</button>
            <button (click)="setInterval(1440)" mat-menu-item>Last 24 hours</button>
            <button (click)="setInterval(2880)" mat-menu-item>Last 2 days</button>
            <button (click)="setInterval(10080)" mat-menu-item>Last 7 days</button>
            <button (click)="setInterval(-1)" [matMenuTriggerFor]="dateTimeMenu" mat-menu-item>Custom</button>
        </div>
        <mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
            <div fxLayout="row">
                <div fxLayout="column">
                    <b>From</b>
                    <mat-calendar></mat-calendar>
                </div>
                <div fxLayout="column">
                    <b>To</b>
                    <mat-calendar></mat-calendar>
                </div>
            </div>
        </mat-menu>
    </div>
</mat-menu>

현재 버튼을 누를 때마다 메뉴가 닫힙니다.각 매트 메뉴 항목에 대해 $event.stoppagation()을 수행하여 마감을 방지할 수 있다는 것을 알고 있습니다.

하지만 나는 그것이 달력의 형식으로 가능한지 알고 싶습니다.

위 이미지에서 볼 수 있듯이 현재 날짜를 선택하면 메뉴가 닫힙니다.그것을 방지할 수 있습니까?

당신은 그저 덧붙이기만 하면 됩니다.(click) = "$event.stopPropagation()"이 달력의 상위 요소에 적용됩니다.아래와 같이.

<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
    <div fxLayout="row">
        <div fxLayout="column" (click)="$event.stopPropagation();">
            <b>From</b>
            <mat-calendar></mat-calendar>
        </div>
        <div fxLayout="column" (click)="$event.stopPropagation();">
            <b>To</b>
            <mat-calendar></mat-calendar>
        </div>
    </div>
</mat-menu>

스택블리츠 데모.

이전 솔루션으로 반환을 제공함으로써 명령을 캡슐화하면 메뉴를 닫지 않고 명령을 계속 실행할 수 있습니다.

HTML로:

<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
    <div fxLayout="row">
        <div fxLayout="column" (click)="doSomething($event);">
            <b>From</b>
            <mat-calendar></mat-calendar>
        </div>
        <div fxLayout="column" (click)="doSomething($event)">
            <b>To</b>
            <mat-calendar></mat-calendar>
        </div>
    </div>
</mat-menu>

INTS:

doSomething($event:any){
    $event.stopPropagation();
    //Another instructions
}

여러 가지 옵션이 있습니다. 다음을 시도해 보시기 바랍니다.

    <mat-menu [hasBackdrop]="false">
     <div  (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
     ...
     </div>
    </mat-menu>

[hasBackdrop]="false" 상자 외부의 아무 곳이나 클릭할 때 매트 메뉴가 닫히지 않도록 하려면, 그렇지 않으면 해당 메뉴를 제거합니다.

mat-menu-content를 클릭해도 mat-menu 닫기를 중지하려면 추가로 해킹했습니다.$event.stopPropogation()mat-menu 대신 닻 태그에 표시되므로 양식의 어느 곳을 클릭해도 메뉴 일로그가 닫히지 않습니다.

Example:- 
    <mat-menu #nameAndDescriptioContextMenu="matMenu" [hasBackdrop]="false">
         <a (click)="$event.stopPropagation();$event.preventDefault();">
               <div>
                 Form Group Form
               </div> 
         </a> 
    </mat-menu>

이 지침을 구성 요소에 직접 사용할 수 있습니다.

HTML로

<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">
    <div fxLayout="row">
        <div fxLayout="column" mat-filter-item>
            <b>From</b>
            <mat-calendar></mat-calendar>
        </div>
        <div fxLayout="column" mat-filter-item >
            <b>To</b>
            <mat-calendar></mat-calendar>
        </div>
    </div>
</mat-menu>

filter.directive.ts가 "@angular/core"에서 {Directive, HostListener, HostBinding}을(를) 가져옵니다.

@Directive({
  selector: "[mat-filter-item]"
})
export class FilterItemDirective {
  @HostListener("click", ["$event"])
  onClick(e: MouseEvent) {
    e.stopPropagation();
    e.preventDefault();

    return false;
  }
}

유감스럽게도 위의 답변들 중 어떤 것도 저에게 통하지 않았습니다.메뉴판이 콘텐츠보다 훨씬 넓어야 할 경우, 넣을 수 있는 곳이 없습니다."$event.stopPropagation();"따라서 매트 메뉴 패널을 클릭하면 닫힙니다.다행히도 '오버라이드'를 통해 이를 피할 수 있는 방법이 남아 있습니다.clickMatMenu 이벤트입니다.다음은 제 동료 https://stackblitz.com/edit/mat-menu-disable-close 덕분에 스택블리츠의 예입니다.

ngAfterViewInit() {
    // Inject our custom logic of menu close
    (this.searchMenu as any).closed = this.searchMenu.close = this.configureMenuClose(this.searchMenu.close);
  }

private configureMenuClose(old: MatMenu['close']): MatMenu['close'] {
    const upd = new EventEmitter();
    feed(upd.pipe(
      filter(event => {
        if (event === 'click') {
          // Ignore clicks inside the menu 
          return false;
        }
        return true;
      }),
    ), old);
    return upd;
  }
}
function feed<T>(from: Observable<T>, to: Subject<T>): Subscription {
  return from.subscribe(
    data => to.next(data),
    err => to.error(err),
    () => to.complete(),
  );
}

이렇게 하면 외부(제거하기 쉬운)를 클릭하고 트리거를 사용하는 경우에만 닫힙니다.그것이 제가 프로젝트에서 원했던 행동이고 누군가에게 유용했으면 좋겠습니다.

이 방법으로 모든 매트 메뉴 항목을 디브 안에 넣고 클릭 이벤트 전파를 중지합니다.

<mat-menu #menu="matMenu" [hasBackdrop]="false">
      <div (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
        <button mat-menu-item>
          <mat-icon>dialpad</mat-icon>
          <span>Origin</span>
        </button>
        <button mat-menu-item disabled>
          <mat-icon>voicemail</mat-icon>
          <span>Check voice mail</span>
        </button>
        <button mat-menu-item>
          <mat-icon>notifications_off</mat-icon>
          <span>Disable alerts</span>
        </button>
      </div>
    </mat-menu>

언급URL : https://stackoverflow.com/questions/46967970/how-to-prevent-angular-material-mat-menu-from-closing