我正在学习Angular。我遵循的教程位于-Angular 2组件交互-扩展组件示例
我试图通过单击颜色选项来更改文本的颜色。这是我在app.component.ts中拥有的-
import { Component, Output, EventEmitter, Input } from '@angular/core';
@Component ({
selector:'my-app',
template:`<div class='color-picker'>
<div class="color-title" [ngStyle]="{'color':color}">Pick a color</div>
<div class='color-picker-wrp'>
<div class='color-sample color-sample-blue' (click)="choose('blue')" ></div>
<div class='color-sample color-sample-red' (click)="choose('red')" ></div>
</div>
</div>`
,
styleUrls:['picker.css']
})
export class AppComponent {
@Input()
color:string;
@Output("color")
colorOutput = new EventEmitter();
choose(color:string)
{
this.colorOutput.emit(color);
console.log(color);
}
}
我已经创建了一个小矮人-https://plnkr.co/edit/ryvw9W220EvLxMSqCCh8 ? p = preview
该颜色未应用于标题-选择一种颜色，但是已正确登录控制台。阅读相关文章后，我无法进行这项工作。
我认为您想Pick a color在单击彩色div时更改文本的颜色，因此更改choose功能如下：
choose(color:string) {
this.colorOutput.emit(color);
this.color= color;
console.log(color);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句