範例:調色盤 另外兩種參考寫法
.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