스타일 바인딩 사용에 대한 Angular 학습 자세한 설명(ngClass 및 ngStyle)

프로젝트 시나리오:

프런트 엔드 개발에서 우리는 종종 다음과 같은 상황에 직면합니다. 여러 페이지가 동일한 코드 조각을 공유하고 동시에 다음의 특정 정보를 사용해야 합니다. 이 코드를 표시할지 아니면 페이지 스타일을 변경할지 결정하기 위해 페이지 또는 특정 작업(예: 특정 버튼 클릭)을 수행합니다. 이때 angular의 스타일 바인딩이 사용됩니다.

---

문제 설명

예: 웹 사이트의 두 페이지에 동일한 코드 조각을 사용해야 합니다. 두 번 작성하는 것은 건식(반복하지 않음) 원칙을 따르지 않으며 또한 매우 비효율적입니다. , 그래서 회사 각도 이것은 일반적으로 프런트 엔드 개발 프로젝트에서는 수행되지 않습니다. 어느 날 당신의 리더가 다음과 같이 말한다면: zzz, 코드를 변경해 주세요. 이 메시지는 이 페이지에 적용되고 다른 페이지에도 적용됩니다. 아래는 설명하기 위한 간단한 예입니다. [관련 튜토리얼 권장사항: "angular Tutorial"]

공통 코드 스니펫(수정 전):

<div class="normalTxt">      
	<span >I love angular</span>         
</div>

---

원인 분석:

Angular의 스타일 바인딩은 위 요구 사항을 충족할 수 있으며, Angle에는 두 가지 스타일이 있습니다. 바인딩 지침: [ngStyle], [ngClass]
참고: 사용할 때는 [ ] 대괄호로 묶어야 합니다!

1.[ngStyle]

<any [ngStyle]=“obj”>

지침:

• 태그 유형은 any를 나타냅니다. 스타일 바인딩은 div, p,span 등과 같은 모든 유형이 될 수 있습니다.
• 여기에 코드 조각을 삽입하세요. ngStyle에 바인딩된 값은 개체여야 합니다.
• 객체 속성은 CSS 스타일 이름이고, 객체의 값은 특정 스타일입니다.

간단한 사용법(html 파일):

//将这段div的背景色改为绿色
<div [ngStyle]="{&#39;background-color&#39;:&#39;green&#39;}">
xxxx
</div>

복잡한 사용법(html 파일):

//如果当前页面为主页则将背景色改为绿色，否则改为红色
<div [ngStyle]="{&#39;background-color&#39;:pageName== &#39;homepage&#39; ? &#39;green&#39; : &#39;red&#39; }">
xxxx
</div>

2.[ngClass]

<any [ngClass]=“obj”>

설명:

• 스타일 바인딩을 나타내는 모든 태그 유형은 어떤 유형이든 될 수 있습니다. div, p, 범위 등으로
• ngClass에 바인딩된 값은 객체여야 합니다.
• 객체 속성은 클래스 이름이고 속성 값은 부울 유형이며 결과는 true/false만 가능합니다. true이면 클래스가 나타나고 그렇지 않으면 클래스가 나타나지 않습니다.

간단한 사용법(html 파일):

//使用.homepageText样式
<div [ngClass]="{&#39;homepageText&#39;:true}">
xxxx
</div>

복잡한 사용법(html 파일):

//当页面名称是homepage时使用.homepageText样式，否则不使用
<div [ngClass]="{&#39;homepageText&#39;:pageName ==&#39;homepage&#39;}">
xxxx
</div>

(css 파일):

.homepageText {    
font-size: 14px;
font-weight: bold;
}

---

해결 방법:

다음은 처음에 발생하는 문제에 대한 해결책입니다. , 희망사항 영감을 가져오세요

공통 코드 스니펫(수정 후):

<div [ngClass]="{&#39;normalTxt&#39;:pageTitle==&#39;portal&#39; ,&#39;specialTxt&#39;:pageTitle==&#39;detail&#39;}">   
   <span>I love angular</span>         
</div>

설명: 포털 페이지에서는 NormalTxt의 효과를 보여주고 싶어하고, 상세 페이지에서는 SpecialTxt의 효과를 보여주고 싶어합니다. NormalTxt 및 SpecialTxt의 특정 스타일을 해당 .css/.scss 파일에 추가해야 합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 스타일 바인딩 사용에 대한 Angular 학습 자세한 설명(ngClass 및 ngStyle)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!