고유한 Angular hover 지시문

@앵귤러/클리: 13.3.0

아니르밤 / ng-호버

고유한 hover 지시문을 빌드하는 Angular 13.3.0 애플리케이션

다시 말하지만, 직장에서 이상한 요구 사항이 발생하면 엔지니어는 프레임워크를 확장하기 위해 제도판으로 이동합니다. angular 절대 실망하지 않습니다!

무엇을 해야 했습니까?

사용자가 페이지의 한 부분을 가리키면 다음과 같이 페이지의 다른 지정된 부분에 일부 CSS 효과가 적용되어야 합니다.



흥미롭지 않나요? 더 간단한 솔루션이 백만 가지 더 있을 수 있지만 저는 여러 곳에서 사용할 수 있는 사용자 지정 각도 지시문을 구축하려고 생각했습니다.

해결책

내가 만든 지시문에는 두 가지 입력이 필요했습니다.

스타일이 적용될 요소의 참조입니다.

적용할 CSS 클래스 목록입니다.

export interface IGroupHover {
  elements: HTMLDivElement[];
  classList?: string | undefined;
}

@Input() set appGroupHover(config: IGroupHover) {
  this._elements = config?.elements ? [...config?.elements] : [];
  this._classes = config?.classList?.split(' ') || [];
}

I have used Tailwindcss for this demo, but that is just because I find it easy to use. Tailwind is no way related to the original purpose.

Also, for the sake of simplicity of the demo, I have only targetted HTMLDivElement, but you can extend this solution to any HTML element.

지시문은 @HostListener 및 mouseenter 이벤트에 대해 mouseleave를 사용합니다.
mouseenter에서 참조된 요소에 클래스를 적용합니다.

@HostListener('mouseenter') onMouseover() {
  if (this._elements && this._classes) {
    for (const element of this._elements) {
      for (const userClass of this._classes) {
        userClass && element.classList?.add?.(userClass);
      }
    }
  }
}

mouseleave 에서 참조된 요소에서 클래스를 제거합니다.

@HostListener('mouseleave') onMouseleave() {
  if (this._elements && this._classes) {
    for (const element of this._elements) {
      for (const userClass of this._classes) {
        userClass && element.classList?.remove?.(userClass);
      }
    }
  }
}

그리고 기술적으로 이것은 지침에 필요한 전부입니다. 이제 어떻게 사용하는지 봅시다.

구현

3열의 그리드 레이아웃이 있고 가운데 열에 마우스를 올려 놓고 왼쪽 또는 오른쪽 열에 지정된 클래스를 번갈아 적용하려고 합니다. 비슷한 데이터 세트를 준비했습니다.
이 데이터 세트를 반복하면서 왼쪽 열에 #left 보기 참조를 설정하고 오른쪽 열에 #right 보기 참조를 설정했습니다.
중간 열에서 지시문을 적용하고 이러한 참조와 적용하려는 클래스를 전달합니다. 따라서 각 중간 열에는 자체 HTMLDivElement 참조 및 적용할 클래스 목록이 있는 자체 지시문 인스턴스가 있습니다.



그리고 당신은 간다! GitHub에서 소스 코드를 다운로드할 수 있습니다.

건배 :-)