Skip to content

Instantly share code, notes, and snippets.

/app.component.css
Created May 25, 2017

Embed
What would you like to do?
範例:調色盤 另外兩種參考寫法
.sample {
width: 100px;
height: 100px;
border: 1px solid gray;
}
<input type="range" min="0" max="255" [(ngModel)]="r">
<input type="range" min="0" max="255" [(ngModel)]="g">
<input type="range" min="0" max="255" [(ngModel)]="b">
<!-- 使用 method -->
<div>使用 method</div>
<div class="sample" [ngStyle]="{'background-color': getMyStyle()}"></div>
<hr />
<!-- 使用 getter -->
<div>使用 getter</div>
<div class="sample" [ngStyle]="{'background-color': myStyle}"></div>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
r = 100;
g = 100;
b = 100;
// This is getter
get myStyle(): string {
// 回傳字串,如 rgb(100, 200, 250)
return `rgb(${this.r}, ${this.g}, ${this.b})`;
}
getMyStyle(): string {
// 回傳字串,如 rgb(100, 200, 250)
return `rgb(${this.r}, ${this.g}, ${this.b})`;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.