Angular: 나만의 상황에 맞는 메뉴 만들기

꽤 놀라운 주제이며 대규모 응용 프로그램에 많이 필요합니다.
모든 개발자는 어떻게든 html 테이블을 사용하여 레코드를 표시하고 편집, 보기 또는 다운로드 및 목록 진행과 같은 작업 버튼을 사용했을 수 있으며 모든 사람이 이러한 버튼이 너무 많은 공간을 차지한다고 느꼈을 것입니다.

솔루션 상황에 맞는 메뉴가 있습니다.
버튼 대신 상황에 맞는 메뉴를 가질 수 있으며 UI 디자인을 방해하지 않고 수행할 작업을 최대한 많이 가질 수 있습니다.


컨텍스트 메뉴를 사용하면 그리드에 다른 정보를 표시할 수 있는 공간이 더 넓어지고 사용자가 마우스 오른쪽 버튼을 클릭하여 작업 항목을 쉽게 가져올 수도 있습니다.
위의 상황에 맞는 메뉴를 달성하기 위한 단계는 다음과 같습니다.

컨텍스트 메뉴 html 사용자가 마우스 오른쪽 버튼을 클릭하면 div가 팝업으로 표시되는 css가 있는 간단한 div가 표시됩니다. 여기에서 모든 작업 항목을 가질 수 있습니다. 여기서 rightPanelStyle은 오른쪽 클릭 이벤트에 추가될 동적 스타일입니다.

<div id="contextmenu" class="contextmenu" [ngStyle]="rightPanelStyle" 
    (clickOutside)="closeContextMenu()" (mouseleave)="closeContextMenu()">
    <ul class="menu">
        <li (click)="edit()"><a><i class="fa fa-eye"></i> View</a></li>
        <li class="activem"><a><i class="fa fa-pencil-square-o"></i> Edit</a></li>
        <li><a><i class="fa fa-download"></i> Download</a></li>
        <li (click)="delete()"><a><i class="fa fa-trash"></i> Delete</a></li>
    </ul>
</div>

컨텍스트 메뉴처럼 보이게 하는 CSS.

.menu {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
    padding: 10px 0;
  }
  .menu > li > a {
    cursor: pointer;
    font: inherit;
    border: 0;
    padding: 10px 30px 10px 15px;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    text-decoration: unset;
    color: #000;
    font-weight: 500;
    transition: 0.5s linear;
    -webkit-transition: 0.5s linear;
    -moz-transition: 0.5s linear;
    -ms-transition: 0.5s linear;
    -o-transition: 0.5s linear;
  }
  .menu > li > a:hover {
    background:#b1b3b6;
    color: #4b00ff;
  }
  .menu > li > a > i {
    padding-right: 10px;
  }
  .menu > li.trash > a:hover { 
    background:#b1b3b6;
  }

.ts 파일에 필요한 코드

rightPanelStyle: any = {};
detectRightMouseClick($event,user) { 
    if ($event.which === 3) { 
      this.rightPanelStyle = { 'display': 'block', 'position': 'absolute', 'left.px': $event.clientX, 'top.px': $event.clientY };
      this.currentRecord = user;
      return false;
    } 
    return true;
  }
  closeContextMenu() { 
     this.rightPanelStyle = { 'display': 'none' }; 
  }

그런 다음 마지막으로 테이블의 td에서 아래와 같이 detectRightMouseClick 함수를 호출해야 합니다.

<td (mouseup)="detectRightMouseClick($event,item)">{{item.name}}</td>

여기서 항목은 함수에 전달하는 ngFor 인스턴스이며 $event를 사용하면 마우스 클릭 위치를 위쪽과 왼쪽으로 가져오는 JavaScript 이벤트가 발생합니다.

브라우저 오른쪽 클릭을 비활성화하고 싶을 수도 있습니다.
그렇지 않으면 두 개의 상황에 맞는 메뉴가 있습니다. 이것을 테이블의 상위 div에 추가할 수 있습니다.

<div oncontextmenu="return false;">

로드할 때 컨텍스트 메뉴를 닫으려면 ngOnInit에서 closeContextMenu를 호출해야 합니다.

몇 가지 새로운 것을 배웠기를 바랍니다.
처음부터 코드를 작성하고 생각하는 과정을 확인해야 하는 경우 YouTube 동영상을 시청하세요.
youTube Link

그리고 이렇게 놀라운 생명을 구하는 게시물로 저에게 댓글을 남겨주세요....