Угловой эквивалент для целевых совпадений событий - PullRequest
Новая
       22

Угловой эквивалент для целевых совпадений событий

0 голосов
/ 10 июня 2018

Я пытаюсь перенести раскрывающееся меню из Javascript в Typescript для использования в моем проекте Angular.Я не могу понять, как имитировать event.target.matches, что вызывает у меня некоторые проблемы.Есть ли эквивалент Typescript, который легко реализовать?

Вот код компонента: 

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'Test Site Please Ignore';
  currentUser: any;

  ngOnInit(){
    this.currentUser=JSON.parse(localStorage.getItem("currentUser"));
  }
  dropfunction(variable){
    var dropdowns=document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
      }
    }
    var thisElement=document.getElementById(variable);
    thisElement.classList.toggle("show");
  };
  onClickedOutside(e: Event) {
    if (!e.target.matches('.dropbtn')){
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
              openDropdown.classList.remove('show');
          }
      }
    }
  }
}

, который выдает мне ошибку: «[ts] Свойство« совпадения »не существует для типа'EventTarget'.»(инициируется оператором if onClickedOutside.

Edit, код шаблона: 

<div class="dropdown">
<button (clickOutside)="onClickedOutside($event)" (click)="dropfunction('myDropdown0')" id="dropbtn0" class="dropbtn">Home</button>
<div id="myDropdown0" class="dropdown-content">
    <a routerLink="/"> Index </a>
    <a routerLink="/profile">Profile</a>
    <div *ngIf="currentUser">
      <a routerLink="/login">Logout</a>
    </div>
    <div *ngIf="!currentUser">
      <a routerLink="/login">Login</a>
      <a routerLink="/register">Register</a>
    </div>
</div>

Ответы [ 3 ]

0 голосов
/ 10 июня 2018

Возможно, вы используете старую версию TypeScript. Методы matches для элементов реализованы в более новых версиях TypeScript.Вы можете увидеть этот поток github , который ссылался на проблему.

Чтобы решить ее:

  • Обновление до последней версии TypeScript

Или

  • Вы можете изменить свое состояние с помощью matches и использовать вместо него classList.contains(). 
 if(!e.target.classList.contains('dropbtn'))
0 голосов
/ 10 июня 2018

Решил с помощью этого поста .Пришлось установить event.target для элемента.

Работает: 

onClickedOutside(e: Event) {
var ele=<Element>e.target;
if (!ele.matches('.dropbtn')){
  var dropdowns = document.getElementsByClassName("dropdown-content");
  var i;
  for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
      }
  }
}

}

0 голосов
/ 10 июня 2018

Попробуйте использовать 

if( !e.target.value === '.dropbtn')

вместо.

...