我试图将下拉菜单从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');
}
}
}
}
}
这给了我错误:&#34; [ts]属性&#39;匹配&#39;类型&#39; EventTarget&#39;上不存在。&#34; (由onClickedOutside的if语句触发。
编辑,模板代码:
<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>
答案 0 :(得分:2)
也许你正在使用旧版本的TypeScript
元素的matches
方法在较新版本的TypeScript中实现。您可以看到引用该问题的github thread。
要解决它:
或者
matches
更改条件,然后使用classList.contains()
。 if(!e.target.classList.contains('dropbtn'))
答案 1 :(得分:0)
尝试使用
if( !e.target.value === '.dropbtn')
代替。
答案 2 :(得分:0)