각도의 HTML 요소에 CSS 클래스를 추가하는 여러 가지 방법에 대한 자세한 설명

이 글에서는 angular의 HTML 요소에 CSS 클래스를 추가하는 여러 가지 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

className 지시문 사용, NgClass 사용 등을 포함하여 Angular의 HTML 요소에 클래스를 동적으로 추가하는 여러 구현을 주로 탐색합니다. ​ 【관련 추천: "angular Tutorial"】

Native JavaScript는 요소에 클래스를 추가합니다

주요 코드는 다음과 같습니다.

let element = document.getElementById('exampleTarget');

element.className = 'additional-class'

더 구체적인 설명은 className 사용법에 있습니다. 여기에 설명됩니다.

[className] 속성 바인딩을 사용하여 Angular에서 CSS 클래스 추가

간단히 className을 사용하여 클래스를 HTML 요소에 바인딩할 수 있습니다. className 为我们的 HTML element 绑定类：

<div [className]="&#39;example-class&#39;">

</div>

当然使用此属性绑定静态类并无太大的意义，我们可以根据条件绑定相关的类：

<div [className]="condition ? &#39;condition-true-example-class&#39;: &#39;false-example-class&#39;">

</div>

在 condition 为 true 的时候，会添加 condition-true-example-class 类，为 false 的时候会添加 false-example-class 类。

同样，我们还可以写入其他的简单的判别：

<div [className]="&#39;example-class&#39; + variableValue">

</div>

基于条件切换 css 的类

当基于某些条件切换 css 的类的时候，上述的方式就稍显繁琐：

<div [className]="condition ? &#39;condition-true-example&#39;:&#39;&#39;">

</div>

既不美观也不太好理解。

我们可以使用：

<div [class.example-class]="condition">

</div>

来实现上述的需求。

更好的使用 ngClass 指令

上述的所有添加类的方式，都可以使用 ngClass 来替代。

该指令只是语法糖，可以是代码看起来更加简洁明了。

像我们使用 ngClass 指令来完成上面的两个示例：

<!-- 替代 className 属性绑定 -->
<div [ngClass]="{
    &#39;condition-true-example-class&#39;: condition,
    &#39;false-example-class&#39;: !condition
}">
  
</div>

<!-- 替代基于条件切换 class -->
<div [ngClass]="{&#39;example-class&#39;: condition}">
  
</div>

除了上述的方式， ngClass 还有一些其他的常用方式：

<!-- 添加单个类 -->
<div [ngClass]="&#39;example-class&#39;">
  
</div>

<!-- 添加多个类 -->
<div [ngClass]="[&#39;example-class&#39;,&#39;example-class-2&#39;]">
  
</div>

更多使用方式请查看： 官方文档

需要注意的是：

如果在组件的 ts 文件中使用 HostBinding 添加了多个类：

export class AppExampleComponent implements OnInit {
  @HostBinding('class') className = 'example-basic-class cursor-pointer d-inline-flex align-items-center';
  // ...
}

那么在使用的时候，则不能在通过 class 、className 、ngClassrrreee

물론, 이 속성을 사용하여 정적 바인딩 클래스는 그다지 의미가 없습니다. 조건에 따라 관련 클래스를 바인딩할 수 있습니다.

rrreee condition이 true이면 condition-true가 추가됩니다. -class 클래스, false인 경우 false-example-class 클래스가 추가됩니다.

마찬가지로 다른 간단한 판단도 작성할 수 있습니다: 🎜rrreee

🎜조건에 따라 CSS 클래스 전환🎜🎜🎜특정 조건에 따라 CSS 클래스를 전환할 때 위의 방법은 조금 번거롭다: 🎜rrreee🎜는 아름답지도 이해하기 쉽지도 않습니다. 🎜🎜위 요구 사항을 달성하려면 🎜rrreee🎜를 사용할 수 있습니다. 🎜

🎜ngClass 지시문을 사용하는 것이 더 좋습니다🎜🎜🎜클래스를 추가하는 위의 모든 방법은 ngClass로 대체할 수 있습니다. 🎜🎜이 명령은 코드를 더 간결하고 명확하게 보이게 하는 구문 설탕일 뿐입니다. 🎜🎜위의 두 가지 예를 완성하기 위해 ngClass 지시문을 사용하는 것처럼: 🎜rrreee🎜위 메서드 외에도 ngClass에는 일반적으로 사용되는 다른 메서드도 있습니다. 🎜rrreee 🎜더 자세한 사용 방법은 다음을 확인하세요. 공식 문서 🎜🎜🎜🎜 🎜 🎜🎜구성 요소의 ts 파일에서 HostBinding을 사용하여 여러 클래스를 추가하는 경우: 🎜rrreee🎜 그러면 이를 사용할 때 class를 전달할 수 없습니다. code>, <code>className, ngClass, 클래스를 추가하세요. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 각도의 HTML 요소에 CSS 클래스를 추가하는 여러 가지 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!