在Angular4中处理几个DOM元素

Question

I'm building a SPA in Angular4/typescript. I have several javascripts which manipulate DOM (add/remove CSS classes) which I want to integrate to the application. What is the best way to do it? Currently the structure of the application is the following:

-app:
 -app.component.ts
 -app.module.ts
 -menu.component.ts
 -menu.view.html
 -menu.css

menu.component.ts handles data display of the application. I want to integrate the following script:

<script>
  const triggers = document.querySelectorAll('.cool > li');
  const background = document.querySelector('.dropdownBackground');
  const nav = document.querySelector('.top');

  function handleEnter(){
    this.classList.add('trigger-enter');
    setTimeout(() => this.classList.contains('trigger-enter') &&
      this.classList.add('trigger-enter-active'), 150);
    background.classList.add('open');

    const dropdown = this.querySelector('.dropdown');
    const dropdownCords = dropdown.getBoundingClientRect();
    const navCoords = nav.getBoundingClientRect();

    const coords = {
      height: dropdownCords.height,
      width: dropdownCords.width,
      top: dropdownCords.top - navCoords.top,
      left: dropdownCords.left- navCoords.left
    };
    background.style.setProperty('width', `${coords.width}px`);
    background.style.setProperty('height', `${coords.height}px`);
    background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
  }

  function handleLeave(){
    this.classList.remove('trigger-enter', 'trigger-enter-active');
    background.classList.remove('open');

  }
  triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
  triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
</script>

CSS:

  nav {
    position: relative;
    perspective: 600px;
  }
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
  }
  .cool > li {
    position: relative;
    display:flex;
    justify-content: center;
  }
  .cool > li > a {
    color: yellow;
    text-decoration: none;
    font-size: 20px;
    background: rgba(0,0,0,0.2);
    padding:10px 20px;
    display: inline-block;
    margin:20px;
    border-radius:5px;
  }
  .dropdown {
    opacity: 0;
    position: absolute;
    overflow: hidden;
    padding:20px;
    top:-20px;
    border-radius:2px;
    transition: all 0.5s;
    transform: translateY(100px);
    will-change: opacity;
    display: none;
  }
  .trigger-enter .dropdown {
    display: block;
  }
  .trigger-enter-active .dropdown {
    opacity: 1;
  }
  .dropdownBackground {
    width:100px;
    height:100px;
    position: absolute;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
    transition:all 0.3s, opacity 0.1s, transform 0.2s;
    transform-origin: 50% 0;
    display: flex;
    justify-content: center;
    opacity:0;
  }
  .dropdownBackground.open {
    opacity: 1;
  }
  .arrow {
    position: absolute;
    width:20px;
    height:20px;
    display: block;
    background:white;
    transform: translateY(-50%) rotate(45deg);
  }

html:

<nav class="top" menuElement>
    <div class="dropdownBackground">
      <span class="arrow"></span>
    </div>

    <ul class="cool">
      <li>
        <a href="#">Some information</a>
        <div class="dropdown dropdown1">
        Info
        </div>
      </li>
      <li>
        <a href="#">More information</a>
        <ul class="dropdown">
          <li>
            some info
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Other Links</a>
        <ul class="dropdown dropdown3">
          <li>some links</li>
        </ul>
      </li>
    </ul>
  </nav>

There are 3 querySelector. I tried to implement the functionality by defining a Directive: menu.directive.ts:

import {Directive, HostListener, ElementRef, Renderer2} from '@angular/core';

@Directive({
  selector: '[menuElement]',
})

export class MenusDirective {
  constructor(
    private renderer: Renderer2,
    private el: ElementRef
  ){}
  //menuLi = this.el.nativeElement.querySelectorAll('.cool > li');
  background = this.el.nativeElement.querySelector('.dropdownBackground');

handleEnter(target){
  this.renderer.addClass(target, 'trigger-enter');
  setTimeout(() => target.classList.contains('trigger-enter') &&
    this.renderer.addClass(target, 'trigger-enter-active'), 150);
    this.background.classList.add('open');

  const dropdown = target.querySelector('.dropdown');
  const dropdownCords = dropdown.getBoundingClientRect();
  const filterNavCoords = this.el.nativeElement.getBoundingClientRect();

  const coords = {
    height: dropdownCords.height,
    width: dropdownCords.width,
    top: dropdownCords.top - filterNavCoords.top,
    left: dropdownCords.left- filterNavCoords.left
  };

  this.background.style.setProperty('width', `${coords.width}px`);
  this.background.style.setProperty('height', `${coords.height}px`);
  this.background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);

}

handleLeave(target){
  this.renderer.removeClass(target, 'trigger-enter');
  this.renderer.removeClass(target, 'trigger-enter-active');
  this.background.classList.remove('open');

}


@HostListener('mouseenter', ['$event']) onMouseEnter(event: Event) {
  this.handleEnter(event.target);
}

@HostListener('mouseleave', ['$event']) onMouseLeave(event: Event) {
  this.handleLeave(event.target);
}

}

If I define the selector [menuElement] equals to the upper nav, I'll be able to select :

background = this.el.nativeElement.querySelector('.dropdownBackground');

or

triggers = this.el.nativeElement.querySelectorAll('.cool > li');

but event Listener would be bind on the whole nav, so there is no way to know which one of the '.cool > li' is selected. If I define [menuElement] as '.cool > li', I don't find a way to select '.dropdownBackground' or the upper nav.

const background = document.querySelector('.dropdownBackground');

returns null (I tried also getElementByClassName, etc.) I can't define them in different Directives as they are manipulated simultaneous. Also I tried to add the function in HTML:

<li (mouseenter)="handleEnter($event.target)" (mouseleave)="handleLeave($event.target)">

But the functions are not recognized as defined in menu.directive and not in menu.component. What are the possible solution? - integrate Javascript as is (loaded after the DOM is loaded) - select several DOM object, but bind a EventListener to one of them. Thanks a lot! Veronika

Answer 1

The way I figured out to work: add Event listeners in view.html:

<li (mouseenter)="handleEnter($event.target);" (mouseleave)="handleLeave($event.target)">

Define handleEnter and handleLeave functions in menu.component.ts, add MenuDirective as a provider: menu.component.ts:

import { MenuDirective } from './menu.directive';

@Component({
  selector: 'menu',
  templateUrl: './menu.view.html',
  styleUrls: [ './app.component.css'],
  providers: [MenuDirective]
})
export class MenuComponent {
  constructor(
    private menuDirective: MenuDirective,
  ){}
handleEnter(target): void {
  this.menuDirective.handleEnter(target);
}

handleLeave(target): void {
  this.menuDirective.handleLeave(target);
}
}

and menu.directive.ts:

import {Directive, HostListener, ElementRef, Renderer2} from '@angular/core';

@Directive({
  selector: '[menuElement]',
})

export class MenuDirective {
  constructor(
    private renderer: Renderer2,
    private el: ElementRef
  ){}

handleEnter(target){
  this.renderer.addClass(target, 'trigger-enter');
  setTimeout(() => target.classList.contains('trigger-enter') &&
    this.renderer.addClass(target, 'trigger-enter-active'), 150);
    this.el.nativeElement.querySelector('.dropdownBackground').classList.add('open');

  const dropdown = target.querySelector('.dropdown');
  const dropdownCords = dropdown.getBoundingClientRect();
  const filterNavCoords = this.el.nativeElement.getBoundingClientRect();
  const coords = {
    height: dropdownCords.height,
    width: dropdownCords.width,
    top: dropdownCords.top - filterNavCoords.top,
    left: dropdownCords.left- filterNavCoords.left
  };
  this.el.nativeElement.querySelector('.dropdownBackground').style.setProperty('width', `${coords.width}px`);
  this.el.nativeElement.querySelector('.dropdownBackground').style.setProperty('height', `${coords.height}px`);
  this.el.nativeElement.querySelector('.dropdownBackground').style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);

}

handleLeave(target){
  this.renderer.removeClass(target, 'trigger-enter');
  this.renderer.removeClass(target, 'trigger-enter-active');
  this.el.nativeElement.querySelector('.dropdownBackground').classList.remove('open');
}

}

It seems too complex for such simple feature...