Angular 2.4.0目標NgClass屬性指令的內部

Question

如何在自定義屬性指令中使用NgClass來更改主要元素CSS類？

如果我有這樣的事情：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <div class="box" myDir [ngClass]="{'blue': blue, 'red': red}"> </div> 
    </div> 
    `, 
}); 

然後，該MYDIR指令裏面，像這樣：

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

@Directive({ 
    selector: '[myDir]' 
}) 

export class MyDirDirective { 
    blue: boolean; 
    red: boolean; 

    constructor() { 
    } 

    ngOnInit() { 
    } 

    @HostListener('mouseenter', ['$event']) 
    onMouseEnter(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 

    this.blue = true; 
    this.red = false; 

    console.log('mouseenter'); 
    } 

    @HostListener('mouseleave', ['$event']) 
    onMouseLeave(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 

    this.blue = true; 
    this.red = false; 

    console.log('mouseleave'); 
    } 

難道我沒有訪問範圍中，藍色和紅色居住在？如果我創建一個切換，我可以用一個按鈕來更新這些值，但似乎並不能從指令本身中完成。這是一個準確的觀察，我應該這樣做，還是有一種替代方案，我沒有在文檔中看到？

Answer 1

屬性blue\red你的情況屬於父組件my-app的範圍。

您可以創建指令，它可以在父組件訂閱更改值內的輸出事件，

類似的東西下面，

@Directive({ 
    selector: '[myDir]' 
}) 
export class MyDirDirective { 
    blue: boolean; 
    red: boolean; 

    @Output() myEvent = new EventEmitter(); 

    @HostListener('mouseenter', ['$event']) 
    onMouseEnter(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    this.myEvent.next('blue'); 
    } 

    @HostListener('mouseleave', ['$event']) 
    onMouseLeave(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    this.myEvent.next('red'); 
    } 
} 

和訂閱此事件在父組件將顏色更新爲blue\red。

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello {{name}}</h1> 
    <div class="box" myDir (myEvent)="myEvent($event)" 
     [ngClass]="{'blue': color === 'blue', 'red': color === 'red'}"> Hello World!!</div> 
    `, 
    styles:[` 
    .blue{ 
    border: 1px solid blue; 
    } 
    .red{ 
    border: 1px solid red; 
    }`] 
}) 
export class AppComponent { 
    name = 'Angular'; 
    color = 'blue'; 

    myEvent(val){ 
    this.color = val; 
    } 
} 

入住這Plunker!!

希望這有助於！