ディレクティブがあり、そのディレクティブを使用するDOM要素にxクラスが追加されているかどうかを検出したいと思います。例えば、私はMyLinkディレクティブでこのクラスを検出したいjavascriptAngular2 - @HostListenerでディレクティブに新しいクラスが追加されていないか確認してください。
<a myLink class="active">A link</a>
から
<a myLink class="">A link</a>
activeクラスはその要素に追加されたリンクを持っているとしましょう。私は何かを試しました
@HostListener('class',['active'])
onVisible(){
console.log("Element active");
}
しかし、それはうまくいきません。 HostListenerや他の方法でどうすればいいですか？
を役に立てば幸い@HostListener()はイベントのみです。また、クラスは、外部のフレームワークに追加されhttps://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html
EDIT：双方向バインディングの場合は[（）]を使用してください。この構文によって、DOMへの変更は、コンポーネントで使用できるようになります
HTML：オリジナル
private status: String;
...
if (status=='active') {
//the class is active
}else{//class is something else
}
：一般
、割り当てるコンポーネントクラスで
<a myLink [(class)]="status">A link </a>
コンポーネント内のロジックを介したクラス。あなたのコンポーネントクラスでは
：私はあなたのアプローチを検討し、あなたがこのような何かを行うことができるかどうかを確認示唆
private status: String;
...
if (condition)
this.status = "active"
else
this.status = ""
HTML：
<a myLink [class]="status">A link </a>
はそれが
を参照してくださいngDoCheck
export class MyClass implements DoCheck { constructor(private elRef:ElementRef) { console.log('myClass'); } ngDoCheck() { console.log('classList: ' + this.elRef.nativeElement.classList); } } あなたが使用することができ、私はそれを手動で変更する必要はありません。私はそれがいつ追加されるかを知りたい。 –
外部フレームワークはどのようにDOMを操作しますか？ – kwalski
セマンティックUI、ブートストラップなどこれらのフレームワークはすべてDOM要素を操作できます。 –
しかし、これは初めにしか動かないと思いますが、これらの変更をどうすれば確認できますか？ –
もう少しコーヒーが必要だと思う:) 'ngDoCheck'の内容を変更しなかった、その関数に' value'という名前の変数はない:)私は同じことをプランカーから行い、私の指示の中でクラスの変更が行われたときに 'classlist'が呼び出されました。しかし、サイドバーを（Sematic-UI btwを使用して）切り替え、 'semantic.js'がクラスを変更すると、変更を検出せず何も印刷しません。しかし、私は別の問題だと思うし、私はこの答えを受け入れるべきです。どうもありがとうございました！ –
右、私はPlunkerで正しいコードを持っていて、間違ったものがコメントアウトされて、間違ったコードを質問に入れました。 –