Angular 2.4.0 属性指令中的目标 NgClass

Question

我将如何在自定义属性指令中使用 NgClass 来更改主要元素 CSS class？

如果我有这样的东西：

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

希望对您有所帮助！！

Angular 2.4.0 属性指令中的目标 NgClass

Angular 2.4.0 Target NgClass Inside of Attribute Directive

scope

typescript

angular-directive

angular