1
사용자에게 RGB 색상 코드를 입력하라는 Angular 2를 사용하여 매우 간단한 웹 응용 프로그램을 만듭니다. 사용자가 코드를 입력하면 페이지 배경이 입력 된 색상으로 변경됩니다.구성 요소 범위 밖에서 스타일 업데이트 - 각도 2
/**
* Fired when the user clicks the #update-background button. This function will read the current input values and set the background color to these values.
*
* @param rgb: RGB object bound to the input fields. Holds the rgb(,,) values for the new background
*/
updateBackgroundColor(rgb) {
// 1. Construct the new background color
var updatedBackgroundColor = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
// 2. Set the background of the <body> to the new background color. Right now I am using direct DOM manipulation because I could not find a way to access the <body> via typescript.
document.body.style.background = updatedBackgroundColor;
}
이 <body>
요소의 스타일을 업데이트하기 위해이 가장 좋은 방법입니다 :
현재, 이쪽은 내 app.component.ts
파일이 무엇인가? 이 코드는 현재 작동 중입니다 (demo).하지만이 코드는 typescript 및 Angular 2를 통해 <body>
요소에 액세스하는 가장 효율적인 방법입니다.
자세한 설명이 필요하면 chrome dev 도구를 사용하고 apple.com과 같은 웹 사이트를 검사하십시오. 이러한 사이트는 요소의 스타일 속성에서 애니메이션을 업데이트합니다. – Ash