使用ngClass的Javascript Angular 4 eventEmitter

Question

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

类CSS是：

.paintRed { 
    background-color: red; 
} 

现在的角部：

我有一个按钮组件：

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'); 
    } 

} 

按钮.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来改变v通过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>