Угловой 7: закрыть меню при нажатии снаружи

Question

Хотелось бы знать, что всякий раз, когда щелчок запускается внутри родительского div #menu, внутри него существует нерелевантный тег html.

nativeElement.parent не работает для меня.

HTML код:

<button #toggleButton (click)="toggleMenu()"> Toggle Menu</button>

 <div class="menu" *ngIf="isMenuOpen" #menu>
    <div>
      I'm the menu. Click outside to close me
    </div>
    </div>

Угловой скрипт:

this.renderer.listen('window', 'click',(e:Event)=>{

        if(e.target !== this.toggleButton.nativeElement && e.target!==this.menu.nativeElement){
            this.isMenuOpen=false;
        }
    });

Это не работает.

Answer 1

Добавить хост в метатег компонента.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: {
    "(window:click)": "onClick()"
  }
})

stopPropagation ()

Метод stopPropagation () интерфейса Event предотвращает дальнейшее распространениетекущее событие в фазах захвата и пузыри.

toggleMenu($event) {    
    $event.stopPropagation();
    this.isMenuOpen = !this.isMenuOpen;
  }

  onClick() {
    this.isMenuOpen = false;
  }

Пример: https://stackblitz.com/edit/angular-oenkbw

Answer 2

вы можете сбросить состояние меню путем прослушивания события щелчка документа, в этом случае любое событие щелчка в меню должно запускать событие вы и любое событие щелчка вне компонента меню resetToggle будет запущено.

stopPropagation - это предотвращает запуск обработчика щелчка документа

  menuItemClickHandler(e , index ) {
   e.stopPropagation();
   // something magical  ?‍♂️✨
    ...
  }

  @HostListener("document:click") resetToggle() {
    this.isMenuOpen=false;
  }

Меню компонентов

export class MenusComponent {

  menuslist = [1, 2, 3, 4, 5, 6, 7, 8];

  @HostBinding('class.active') isMenuOpen: boolean = false;

  constructor() { }

  menuItemClickHandler(e, index) {
    e.stopPropagation();
    // something magical  ?‍♂️✨
    console.log(index);
    this.toggle(e); // toggle menus after you click ?
  }
  // component click
  @HostListener('click', ['$event']) click(e) {
    e.stopPropagation();

  }
  @HostListener("document:click") resetToggle() {
    this.isMenuOpen = false;
  }

  toggle(e) {
    e.stopPropagation();
    console.log('toggle')
    this.isMenuOpen = !this.isMenuOpen;
  }

}

шаблон компонента меню

<ul ngClass="{slide : isMenuOpen}">
  <li *ngFor="let item of menuslist;let index=index" (click)="menuItemClickHandler($event,index)">
    {{item}}
  </li>
  </ul>

Стиль меню будет переключать меню, чтобы скользить по основанию меню или выключать его. Открытое значение

:host {
  display: block;
  height: 50vh;
  width: 200px;
  background: #ccc;
  margin-left: -300px;
  transition: all 0.25s ease-in-out;
}
:host.active{
  margin-left: 0
}

демонстрация стекаблиц ??