Angular4에서 HTML 속성 바인딩을 구현하는 방법

이 글에서는 주로 Angular4 학습 튜토리얼에서 HTML 속성 바인딩에 대한 관련 정보를 소개합니다. 이 글에서는 모든 사람의 학습이나 작업에 특정 참고 학습 가치가 있는 샘플 코드를 통해 매우 자세하게 소개합니다.

이 글은 주로 Angular4 HTML 속성 바인딩에 대한 관련 내용을 소개하며, 참고 및 학습을 위해 공유합니다. 아래에서는 자세히 설명하지 않겠습니다. 자세한 소개를 살펴보겠습니다.

소개

기본 HTML 속성

<td [attr.colspan]="tableColspan"></td>

Css 클래스 바인딩

<!-- 第一种情况 class 类全部替换 -->
<p [class]="pClass">CSS 类绑定，[class] 全部替换的例子</p>
<!-- 第二种情况 替换 class 类的部分属性 --> 
<p [class.a]="isSpcial">CSS 类绑定，[class.sepcial] 部分替换的例子</p> 
<!-- 第三种情况 根据表达式显示部分 class 属性-->
<p [ngClass]="{a:isA, b:isB}">CSS 类绑定，[ngClass] 替换多个的例子</p>

Style 속성 바인딩

 <!-- 替换部分的 Style -->
 <button [style.color]="isSpecial ? &#39;red&#39; : &#39;green&#39;" ]>Red</button> 
 <!-- 替换所有的样式 -->
 <button [ngStyle]="{&#39;font-style&#39;:this.canSave? &#39;italic&#39; : &#39;normal&#39;}" ]>Red</button>

HTML 속성 바인딩

<td [attr.colspan]=”tableColspan”>Something</td>

tableColspan은 표현식입니다. 렌더링 그럴 때 TableColspan의 값을 ATTR 뒤의 colSpan에 바인딩할 시간입니다. 바인딩을 수정하려면 다음으로 이동하세요.

첫 번째 경우

[calss]

someExpression 값이 클래스 값을 완전히 대체합니다. ㅋㅋㅋ

특별해요 isSpecial이 true이면 특수 값이 표시되고 false이면 표시되지 않습니다.

Modifybind.comComponent.html

<!-- 增加代码 -->
<p>
 <p>[attr.colspan] 例子：</p>
 <table border="1px">
 <tr>
 <td [attr.colspan]="colspanSize">跨列的例子</td>
 </tr>
 <tr>
 <td>单元格1</td>
 <td>单元格1</td>
 </tr>
 </table>

Modifybind.comComponent.ts

.a{background-color: #A7A9AE;}
.b{color: #488aff;}
.c{font-size: 1rem;}

그림:

세 번째 사례

<!-- 增加代码 -->
<p>
 <p>CSS 类绑定例子1：[class]</p>
 <p [class]="pClass">CSS 类绑定，[class] 全部替换的例子</p>
</p>

aaa는 레이블 위 클래스의 속성 값을 참조하며 isA는 다음과 같습니다. boolean 인 경우 aaa 속성은 isA가 true인 경우에만 표시됩니다. 마찬가지로 bbb도 마찬가지다.

bind.comComponent.html 수정

pClass: string;
constructor() {
 //在3秒钟之后将样式设置为 " a b c "
 setInterval(()=>{
 this.pClass = "a b c";
 }, 3000)
}

bind.comComponent.ts

<!-- 增加代码 -->
<p [class.a]="isSpcial">CSS 类绑定，[class.sepcial] 部分替换的例子</p>

수정

컨트롤 스타일 색상(값이 지정된 경우) isSpecial이 true이면 색상 속성은 빨간색입니다.

두 번째 경우

pClass: string;
isSpcial: boolean = false;
constructor() {

 setInterval(()=>{
 this.pClass = "a b c";
 
 //在 3秒钟之后显示样式
 this.isSpcial = true;
 }, 3000)
}

스타일을 글꼴 스타일로 제어합니다. this.canSave의 값이 trur이면 스타일이 이탤릭체이고, 그렇지 않으면 정상입니다.

끝에 작성하세요

1. Style Defined의 속성 바인딩과 클래스 속성 바인딩은 동일합니다.

2. 기사에 사용된 코드는 위의 Angular2 학습 노트의 데이터 바인딩 예제와 결합됩니다. 링크 주소: //www.jb51.net/article/132122.htm

위는 제가 모두를 위해 편집한 것입니다. 네, 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

Javascript에서 가장 긴 공통 하위 시퀀스를 구현하는 방법

Node.js에서 파일 업로드 진행 상황을 얻는 방법은 무엇입니까?

Node.js가 웹 애플리케이션 개발에서 인기 있는 선택이 되는 이유는 무엇입니까?

자바스크립트를 사용하여 날짜 범위 내 매일 다른 가격을 얻는 방법

위 내용은 Angular4에서 HTML 속성 바인딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!