Question

我正在学习Angular。我在 - Angular 2 Component Interaction - Extended Components Example

上学习了教程

我正在尝试通过单击颜色选项来更改文本的颜色。这是我在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);
   }
}

我创建了一个plunker - https://plnkr.co/edit/ryvw9W220EvLxMSqCCh8?p=preview

颜色不适用于标题 - 选择一种颜色，但它会在控制台中正确记录。阅读相关文章后，我无法完成这项工作。

Answer 1

我认为您希望在点击彩色div时更改文字Pick a color的颜色，因此请更改choose功能，如下所示：

choose(color:string) {     
  this.colorOutput.emit(color);
  this.color= color;
  console.log(color);
}

ngStyle在Angular中不起作用

1 个答案: