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!!

希望这有助于！