带有ngClass的Javascript Angular 4 eventEmitter

Question

我正在使用 Angular 4 和 eventEmitter 来更改类名。

类css是：

.paintRed {
    background-color: red;
} 

现在是 Angular 部分：

我有一个按钮组件：

button.compoment.ts：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnInit {

  @Output() outputEvent: EventEmitter<any> = new EventEmitter();

  constructor() { }

  ngOnInit() {}

  sendOutEvent() {
    this.outputEvent.emit('paintRed');
  }

}

button.component.html

<p (click)="sendOutEvent()">Click to Emit</p>

我的 app.component.ts 终于有了：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';

  handleEvent(value) {
    console.log(value);
    document.getElementById('elementId').classList.add(value);

  }

}

我的 app.component.html 看起来像这样：

<div id="elementId">

  <app-button (outputEvent)="handleEvent($event)"></app-button>

</div>

以上将成功将“paintRed”类添加到elementId，但我想要做的是：

<div ngClass="myClass">

  <app-button (outputEvent)="handleEvent($event)"></app-button>

</div>

基本上我想用ngClass来改变handleEvent($event)发送的值...

我该怎么做？

Answer 1

在您的 app.component.ts 中

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  myClass = '';

  handleEvent(value) {
    console.log(value);
    myClass = value;
  }
}

还有你的html：

<div [ngClass]="myClass">

  <app-button (outputEvent)="handleEvent($event)"></app-button>

</div>