집 >웹 프론트엔드 >JS 튜토리얼 >Angular 2+의 스타일 바인딩 방법은 무엇입니까?

Angular 2+의 스타일 바인딩 방법은 무엇입니까?

亚连원래의: 2018-06-11 17:43:221375검색

이 글에서는 주로 Angular 2+ 스타일 바인딩을 파싱하는 방법을 소개하고 참고용으로 올려드립니다.

소개

저는 1년 반 동안 ngx(angular 2+는 이제부터 직접 ngx라고 칭하겠습니다)를 개발해왔습니다. 처음 개발을 시작할 때는 angular2 RC를 사용했습니다. 이제 Angular5 버전을 사용할 수 있게 되었습니다. 시간이 참 빨리 가네요! ngx）也有1年半的时间了，刚开始开发的时候使用的还是angular2 RC版，现在已经出angular5了，时光飞逝啊！

ngx从设计之初就是一个component-based的框架，所以大到一个页面，小到一个按钮，都是一个component。

这就涉及到了组件的重用，设计通用组件的时候，必不可少的就是动态的样式绑定。

回头想想， angular还真是给我们提供了好几种属性绑定的方式呢。

接下来我们就来具体看看如果在组件中使用样式绑定。

style binding

[style.propertyName]

我们有一个button，默认的样式是bootstrap的primary,

假如在不同的页面中按钮的大小要不同，这个时候就需要动态绑定button的字体大小，可以使用[style.propertyName]来实现。

template中代码

<button 
  class="btn btn-primary" 
  [style.fontSize]="fontSize">
  Style Binding
</button>

Component类中代码

private fontSize: string = "2em";

结果如图：

假如我们还需要动态设置button的边框半径border-radius，

template中代码则变为：

<button 
  class="btn btn-primary" 
  [style.fontSize]="fontSize"
  [style.borderRadius]="borderRadius">
  Style Binding
</button>

Component类中代码则变为：

private fontSize: string = "2em";
private borderRadius: string = "10px";

则结果变成：

使用[style.propertyName]来绑定样式属性固然不粗，可是一旦有新的需求，我们就需要继续加上我们需要绑定的属性，这个时候组件上绑定的属性就会越来越多，我们有没有办法来创建一个object来存储我们需要绑定的属性呢？当然有，[ngStyle]就可以帮我们来做这件事情。

[ngStyle]

所以上面的例子，我们就可以直接使用[ngStyle]来动态绑定button的font-size和border-radius。

template中的代码则变为：

<button 
  class="btn btn-primary" 
  [ngStyle]="btnStyle" >
  Style Binding
</button>

Component类的代码则变为：

private btnStyle: any = {
  borderRadius: "10px",
  fontSize: "2em"
};

结果为：

[style.propertyName] vs. [ngStyle]

[style.propertyName]每次只能绑定一个属性

而 [ngStyle] 则可以同时绑定多个属性

当[style.propertyName] 和 [ngStyle] 绑定同一个属性时，比如都需要动态修改font-size, [style.propertyName]则会覆盖[ngStyle]里面的同一属性.

当然除了style binding, 我们还可以使用class binding来动态修改样式。

class binding

[class.className]

使用这种方式，我们可以根据绑定变量的值来动态添加或者移除css class。
还是使用刚才button的例子。

则代码变为：

//template
<button 
  class="btn btn-primary" 
  [class.btnBorder]="changeBorder" >
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}

//Component Class
private changeBorder: boolean = true;

结果如图：

看着字体有点小啊，我们再动态添加一个改变字体的class：my

这个时候代码就变为了：

//template
<button 
  class="btn btn-primary" 
  [class.btnBorder]="changeBorder" [class.btnFont]="changeFont" >
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

结果如图：

[ngClass]

像[ngStyle]一样，angular也给我们提供了一个指令[ngClass]来动态绑定多个css class。

那么我们可以使用[ngClass]对上面的代码重构一下

//template
<button 
  class="btn btn-primary" 
  [ngClass]= "{&#39;btnFont&#39;: changeFont, &#39;btnBorder&#39;: changeBorder}">
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changeBorder: boolean = true;
private changeFont: boolean = true;

结果依旧为：

[ngClass]需要绑定一个object，key是css类名， value是绑定的变量。

[class.className] vs. [ngClass]

[class.className]每次只能绑定一个CSS类。

而 [ngClass] 则可以同时绑定多个CSS类。

当[class.className] 和 [ngClass] 需要动态修改同一个样式时，比如都需要动态修改font-size, [class.className]则会覆盖[ngClass]里面的统一样式.

[className]

angular还提供一种绑定方式，就是直接通过修改元素的className来动态改变样式。

但我不推荐

ngx는 처음부터 컴포넌트 기반 프레임워크였기 때문에 페이지부터 버튼까지 모든 것이 컴포넌트입니다.

범용 구성 요소를 디자인할 때는 동적 스타일 바인딩이 필수적입니다. 🎜🎜돌아보면, Angle은 실제로 여러 가지 속성 바인딩 방법을 제공합니다. 🎜🎜다음으로 구성 요소에서 스타일 바인딩을 사용하는 방법을 자세히 살펴보겠습니다. 🎜🎜🎜style 바인딩🎜🎜🎜🎜[style.propertyName]🎜🎜🎜버튼이 있고 기본 스타일은 bootstrap입니다. primary,🎜🎜페이지마다 버튼 크기가 다른 경우 버튼의 글꼴 크기를 동적으로 바인딩해야 합니다. [style.propertyName]을 사용하면 됩니다. 이. 🎜🎜템플릿의 코드🎜

//template
<button 
  class="btn btn-primary" 
  [className]="changedFont">
  Style Binding
</button>

//CSS
.btnBorder {
 border-color: green;
 border-radius: 10px;
}
.btnFont {
 font-size: 2em;
 font-weight: bold;
}

//Component Class
private changedFont: string = "btnFont";

🎜컴포넌트 클래스의 코드🎜rrreee🎜결과는 그림과 같습니다.🎜

🎜🎜버튼 border-radius의 테두리 반경을 동적으로 설정해야 하는 경우, 🎜🎜템플릿의 코드는 다음과 같습니다:🎜rrreee🎜Component 클래스의 코드는 다음과 같습니다. 🎜rrreee🎜결과는 다음과 같습니다. 🎜

🎜🎜[style.propertyName]을 사용하여 스타일 속성을 바인딩하는 것은 쉽지 않지만 일단 새로운 것이 있으면 필요에 따라 계속 추가해야 합니다. 이때 구성 요소에 바인딩되는 속성이 점점 더 많아질 것입니다. 바인딩해야 하는 속성을 저장하기 위해 객체를 생성할 수 있는 방법이 있습니까? ? 물론 [ngStyle]이 이를 수행하는 데 도움이 될 수 있습니다. 🎜🎜🎜[ngStyle]🎜🎜🎜위 예에서는 [ngStyle]을 직접 사용하여 버튼의 font-size 및 border를 동적으로 바인딩할 수 있습니다. 반경. 🎜🎜템플릿의 코드는 다음과 같습니다. 🎜rrreee🎜구성 요소 클래스의 코드는 🎜rrreee🎜결과는 다음과 같습니다. 🎜

🎜🎜🎜[style.propertyName] 대 [ngStyle]🎜🎜🎜[style.propertyName] 매번 하나의 속성만 바인딩할 수 있습니다🎜🎜그리고 [ngStyle]은 동시에 여러 속성을 바인딩할 수 있습니다🎜🎜[style.propertyName]과 [ngStyle]이 동일한 속성에 바인딩되면 예를 들어 둘 다 를 동적으로 수정해야 합니다. 글꼴 크기 , [style.propertyName]은 [ngStyle]의 동일한 속성을 덮어씁니다. 🎜🎜물론 스타일 바인딩 외에도 클래스 바인딩을 사용하여 동적으로 수정할 수도 있습니다. 스타일. 🎜🎜🎜class 바인딩🎜🎜🎜🎜[class.className]🎜🎜🎜이 메서드를 사용하면 바인딩 변수의 값에 따라 동적으로 추가하거나 이동할 수 있습니다. CSS 클래스는 제외합니다.
아직도 버튼 예제를 사용하고 있습니다. 🎜🎜그러면 코드는 다음과 같습니다: 🎜rrreee🎜결과는 그림과 같습니다: 🎜

🎜🎜글꼴이 조금 작은 것을 보면, 글꼴을 변경하는 클래스를 동적으로 추가해 보겠습니다. my🎜🎜이때 코드는 다음과 같습니다. : 🎜rrreee🎜결과는 다음과 같습니다: 🎜

🎜🎜🎜[ngClass]🎜🎜🎜[ngStyle]과 마찬가지로 각도도 여러 CSS 클래스를 동적으로 바인딩하는 [ngClass] 명령을 제공합니다. 🎜🎜그런 다음 [ngClass]를 사용하여 위 코드를 리팩터링할 수 있습니다🎜rrreee🎜결과는 여전히 다음과 같습니다.🎜

🎜🎜[ngClass]는 객체를 바인딩해야 하며 키는 CSS 클래스 이름이고 값은 바인딩된 변수입니다. 🎜🎜🎜[class.className] 대 [ngClass]🎜🎜🎜[class.className]은 한 번에 하나의 CSS 클래스만 바인딩할 수 있습니다. 🎜🎜그리고 [ngClass]는 여러 CSS 클래스를 동시에 바인딩할 수 있습니다. 🎜🎜[class.className]과 [ngClass]가 동일한 스타일을 동적으로 수정해야 하는 경우(예: 둘 다 글꼴 크기를 동적으로 수정해야 하는 경우) [class.className]은 [ ngClass] 내부의 통일된 스타일 🎜🎜🎜[className]🎜🎜🎜angular는 요소의 className을 직접 수정하여 동적으로 스타일을 변경하는 바인딩 방법도 제공합니다. 🎜🎜하지만 저는 이 방법을 권장하지 않습니다. 왜 안 될까요? 아래 예시를 보세요🎜rrreee🎜결과는 다음과 같았습니다.🎜

미리 구성된 부트스트랩 primary이 제거되었습니다. [className]이 동적으로 바인딩된 클래스 이름을 추가한 다음 이전 클래스 이름을 모두 제거하기 때문입니다.
따라서 이 바인딩 방법은 매우 위험합니다. 왜냐하면 컴포넌트의 경우 일반적으로 스타일을 공동으로 제어하기 위해 많은 유형이 있기 때문입니다.

일반 구성 요소에서는 [className] 사용이 매우 권장되지 않습니다.

Summary

마지막으로 Angular의 다양한 스타일 바인딩의 특징과 차이점을 요약해 보겠습니다.

[style.propertyName]은 문자열 유형 스타일 값 또는 문자열 유형 변수를 직접 바인딩합니다. 우선순위가 가장 높으며 기존 스타일 속성을 덮어씁니다.
[ngStyle]은 스타일 조합 개체를 바인딩하며 키는 CSS 속성 이름, 값은 해당 스타일 값 또는 문자열 유형의 변수입니다.
[class.className]은 true/false 또는 부울 유형 변수를 직접 바인딩합니다.
[ngClass]는 CSS 클래스 이름의 조합인 객체를 바인딩합니다. 키는 CSS 클래스 이름이고 값은 true/false 또는 부울 유형 변수입니다.
[className]은 CSS 클래스 이름이나 문자열 유형 변수를 직접 바인딩합니다. (이 방법은 권장하지 않습니다.)

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Angular 2+의 스타일 바인딩 방법은 무엇입니까?

관련 기사