使用ngClass的Javascript Angular 4 eventEmitter
问题描述:
我正在使用Angular 4和eventEmitter来更改类名称。使用ngClass的Javascript 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)发送的线索...
我该怎么做?
答
在你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>
没错,OP已经错过了周围'ngClass'两个角括号这是需要告诉角度说“ myClass“是一个局部变量,而不是一个字符串。 – mauris
那和'myClass'不存在。 – UncleDave