Angular2ディレクティブの次の要素にクラスを追加します

Question

私はドロップダウンメニューを持っていますが、このドロップダウンのオープン/クローズの処理にangular2ディレクティブを使用したいと思います。 クラスをlatest-notification divに追加するにはどうすればよいですか。私の指示がbuttonタグに適用されていることを知って！ここで

は私のhtmlコードです：

<div class="header-notification" (clickOutside)="showPopupNotification = false"> 
     <button appDropdown> 
     <span [class.has-notification]="hasNotification"></span><icon name="ico_notification"></icon> 
     </button> 
     <div class="latest-notification"> 
     <span class="top-pointer"><icon name="arrow-popup"></icon></span> 
     <div class="wrap"> 
      <ul> 
      <li *ngFor="let notify of notifications" [class.seen]="notify.seen"> 
       <a> 
       <avatar src="{{notify.userProfileUrl}}" size="35"></avatar> 
       <time>{{notify.createAt}}</time> 
       <h5>{{notify.name}}</h5> 
       <p>{{notify.message}}</p> 
       </a> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </div> 

そして、ここでは私のディレクティブです：

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

@Directive({ 
    selector: '[appDropdown]' 
}) 
export class DropdownDirective { 
    private isOpen = false; 

    @HostBinding('class.open') get opened() { 
    return this.isOpen; 
    } 

    @HostListener('click') open() { 
    this.isOpen = !this.isOpen; 
    } 
    constructor() { } 

} 

Answer 1

ここでは、私が見つけた解決策です。私はこれが正しい方法であるとは限りません。少なくともそれは働いています。

今すぐ追加されました。toggleディレクティブにボタンディレクティブがアクティブになり、それをクリックすると、名前openのクラスが次の要素latest-notificationに追加されます。また、ボタンの外側をクリックすると、openクラスが削除されます。皆さんの考えをお聞かせください。

HTML側：ここ

<div class="header-notification"> 
    <button toggle> 
    ... 
    </button> 
    <div class="latest-notification"> 
    ... 
    </div> 
</div> 

とはディレクティブです：

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

@Directive({ 
    selector: '[toggle]' 
}) 
export class DropdownDirective { 
    isOpen = false; 

    constructor(private el: ElementRef, private renderer: Renderer) {} 

    @HostListener('click') open() { 
    let nextElement = this.el.nativeElement.nextElementSibling; 
    this.isOpen = !this.isOpen; 

    if (this.isOpen === true) { 
     this.renderer.setElementClass(nextElement, "open", true); 
    } else { 
     this.renderer.setElementClass(nextElement, "open", false); 
    } 
    } 

    // close dropdown if clicked outside 
    public clickOutside = new EventEmitter<MouseEvent>(); 

    @HostListener('document:click', ['$event', '$event.target']) 
    public onClick(event: MouseEvent, targetElement: HTMLElement): void { 
    if (!targetElement) { 
     return; 
    } 

    const clickedInside = this.el.nativeElement.contains(targetElement); 

    if (!clickedInside) { 
     this.clickOutside.emit(event); 
     this.isOpen = false; 
     let dropdown = this.el.nativeElement.nextElementSibling; 
     this.renderer.setElementClass(dropdown,"open", false); 
    } 
    } 


} 

Answer 2

後半の応答のため申し訳ありません。

ディレクティブにexportAsメタプロパティを使用して、目的を達成することができます。

---

/* #temp is a local template variable */ 
/* mydir is defined in dropdowndirective as exportAs meta property */ 

<button #temp=mydir appDropdown> 

---

/* using vc which is defined in dropdown component */ 
<div class="latest-notification" [class.open]="vc.isOpen" [class.close]="!vc.isOpen"> 

---

import {DropdownDirective} from 'path'; 

export class DropDownComponent{ 
    @Viewchild('temp') vc:DropdownDirective; // vc can hold isOpen variable directly defined in Dropdowndirective. 
} 

---

（私はあなたが変更を加える必要があるだけで、関連する行を表示します）

@Directive({ 
    selector: '[appDropdown]' 
    exportAs:'myDir'       // addded this line 
}) 

デモ：http://plnkr.co/edit/AE8n4McCez7ioxiTSExL?p=preview