프런트 엔드 개발에서 우리는 종종 다음과 같은 상황에 직면합니다. 여러 페이지가 동일한 코드 조각을 공유하고 동시에 다음의 특정 정보를 사용해야 합니다. 이 코드를 표시할지 아니면 페이지 스타일을 변경할지 결정하기 위해 페이지 또는 특정 작업(예: 특정 버튼 클릭)을 수행합니다. 이때 angular의 스타일 바인딩이 사용됩니다.
예: 웹 사이트의 두 페이지에 동일한 코드 조각을 사용해야 합니다. 두 번 작성하는 것은 건식(반복하지 않음) 원칙을 따르지 않으며 또한 매우 비효율적입니다. , 그래서 회사 각도 이것은 일반적으로 프런트 엔드 개발 프로젝트에서는 수행되지 않습니다. 어느 날 당신의 리더가 다음과 같이 말한다면: zzz, 코드를 변경해 주세요. 이 메시지는 이 페이지에 적용되고 다른 페이지에도 적용됩니다. 아래는 설명하기 위한 간단한 예입니다. [관련 튜토리얼 권장사항: "angular Tutorial"]
공통 코드 스니펫(수정 전):
<div class="normalTxt"> <span >I love angular</span> </div>
Angular의 스타일 바인딩은 위 요구 사항을 충족할 수 있으며, Angle에는 두 가지 스타일이 있습니다. 바인딩 지침: [ngStyle], [ngClass]
참고: 사용할 때는 [ ] 대괄호로 묶어야 합니다!
1.[ngStyle]
<any [ngStyle]=“obj”>
지침:
간단한 사용법(html 파일):
//将这段div的背景色改为绿色 <div [ngStyle]="{'background-color':'green'}"> xxxx </div>
복잡한 사용법(html 파일):
//如果当前页面为主页则将背景色改为绿色,否则改为红色 <div [ngStyle]="{'background-color':pageName== 'homepage' ? 'green' : 'red' }"> xxxx </div>
2.[ngClass]
<any [ngClass]=“obj”>
설명:
간단한 사용법(html 파일):
//使用.homepageText样式 <div [ngClass]="{'homepageText':true}"> xxxx </div>
복잡한 사용법(html 파일):
//当页面名称是homepage时使用.homepageText样式,否则不使用 <div [ngClass]="{'homepageText':pageName =='homepage'}"> xxxx </div>
(css 파일):
.homepageText { font-size: 14px; font-weight: bold; }
다음은 처음에 발생하는 문제에 대한 해결책입니다. , 희망사항 영감을 가져오세요
공통 코드 스니펫(수정 후):
f4d511afc8efca1bd60a437c643cdd97 45a2772a6b6107b401db3c9b82c049c2I love angular54bdf357c58b8a65c66d7c19c8e4d114 16b28748ea4df4d9c2150843fecfba68
설명: 포털 페이지에서는 NormalTxt의 효과를 보여주고 싶어하고, 상세 페이지에서는 SpecialTxt의 효과를 보여주고 싶어합니다. NormalTxt 및 SpecialTxt의 특정 스타일을 해당 .css/.scss 파일에 추가해야 합니다.
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !
위 내용은 스타일 바인딩 사용에 대한 Angular 학습 자세한 설명(ngClass 및 ngStyle)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!