Question

我在自己的外部单击时搜索了如何关闭下拉菜单。我偶然发现了该网站，并按照说明进行了操作，但是它对我有用。.但是我很难理解它。

问题1）为什么选择器和EventEmitter命名相同对作者来说很重要？

问题2）为什么作者在第二个参数中使用['$ event.target']？为什么他要放在方括号中？这是否使其成为数组？如果是这样，为什么他需要将其提供为数组？

问题3）正在调用onClick（targetElement），但我从未看到任何传递给该参数的信息吗？如果什么都没有传递给目标元素，并且代码中有什么地方将代码传递给参数，那么作者为什么要用targetElement创建一个参数？

问题4）['$ event.target']是否传递到onClick（targetElement）？如果是这样，他们俩不应该有相同的名字吗？例如['targetElement']和onClick（targetElement）？

问题5）如何调用此函数toggleDropDown（）？当它在外部时，我怎么知道何时调用它？我看不到此函数调用与指令中的代码之间的任何关系。两者如何相互作用？它如何知道在div之外运行此功能。 2之间的联系在哪里？

问题6）为什么作者在this.appClickOutside.emit（null）中发出null？为什么作者不在代码中说..例如不运行功能toggleDropDown（）？

我按照此处的说明进行操作：https://christianliebel.com/2016/05/angular-2-a-simple-click-outside-directive/

<ul (appClickOutside)="toggleDropDown()">
  <li>hi</li>
</ul>

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

@Directive({
  selector: '[appClickOutside]'
})
export class ClickOutsideDirective {

  constructor(private elementRef: ElementRef) {}

  @Output()
  public appClickOutside = new EventEmitter();

  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement: any) {
    const clickedInside = this.elementRef.nativeElement.contains(targetElement);

    if (!clickedInside) {
      this.appClickOutside.emit(null);
    }
  }

}

有人可以帮我理解这个Angular代码

0 个答案: