Angular4에서 HTML 속성 바인딩을 구현하는 방법-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-06-13 16:22:58

원래의

2411명이 탐색했습니다.

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

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

소개

기본 HTML 속성

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

로그인 후 복사

Css 클래스 바인딩 CSS 类绑定，[class] 全部替换的例子  CSS 类绑定，[class.sepcial] 部分替换的例子  CSS 类绑定，[ngClass] 替换多个的例子
로그인 후 복사
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이면 스타일이 이탤릭체이고, 그렇지 않으면 정상입니다.

끝에 작성하세요