javascript - 带有ngClass的Javascript Angular 4 eventEmitter

标签 javascript angular

我正在使用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');
  }

}


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>


上面将成功地将class“ paintRed”添加到elementId,但是我想要做的是:

<div ngClass="myClass">

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

</div>


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

我怎样才能做到这一点?

最佳答案

在您的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>

关于javascript - 带有ngClass的Javascript Angular 4 eventEmitter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46850354/

相关文章:

javascript - Redux:连接组件列表的性能

Javascript - 如何让浏览器切换标签页?

angular - 如何从一组可观察对象中捕获所有不同的响应?

css - angular2 表单验证 - .ng-invalid :not(form) 是什么

javascript - 创建复选框数组并将其传递给javascript函数

javascript - d3插值示例说明

javascript - 检查 execCommand createlink 状态

javascript - 如何在Angular中处理LocalDateTime后端响应

由于动画中的 query() 调用导致 Angular 单元测试失败

javascript - 无法解析 ApplicationModule : (? 的所有参数)-Angular 7 JIT