Angular 2.4.0 Target 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!!

希望这会有所帮助！