Angular4의 내장 지시문의 기본 사용법에 대해

다음 글은 주로 Angular4에 내장된 명령어의 기본적인 사용법을 소개하고 있습니다. 글은 샘플 코드를 통해 자세히 소개하고 있으니 필요하신 분들은 아래에서 살펴보시면 됩니다.

지시사항은 ng의 가장 강력한 기능 중 하나라고 말씀드리고 싶습니다. 그 중 가장 강력한 기능 중 하나를 제거할 수도 있습니다.

머리말

ng에는 사용자 정의 지침이 많이 내장되어 있어 우리가 직접 바퀴를 재발명할 수 없다는 것을 누구나 알고 있습니다. 동시에 ng는 페이지 요소 태그를 더욱 인스턴스화할 수 있는 사용자 정의 지침 기능도 제공합니다.

이 글에서는 각 내장 명령의 사용법을 별도로 나열하고 데모용 예시를 제공합니다. 각 내장 명령의 기본 사용법을 더 빠르고 정확하게 배울 수 있도록 최소한의 간단한 설명을 사용해보세요.

ngFor

기능: for 루프처럼 배열에서 값을 반복적으로 가져와 표시할 수 있습니다.

예:

// .ts

this.userInfo = ['张三', '李四', '王五'];

// .html

<p class="ui list" *ngFor="let username of userInfo">
 <p class="item">{{username}}</p>
</p>

설명:

그의 구문은 *ngFor="let username of userInfo"입니다. 여기서 userInfo는 값이 있는 배열입니다. , username은 매번 꺼내지는 값입니다. 그러면 이 태그의 내용이 반복적으로 실행되고 사용자 이름이 양방향 바인딩을 통해 표시됩니다. *ngFor="let username of userInfo" ，其中 userInfo 是从中取值的数组，username 是每次从中取出来的值。然后在这个标签里面的内容就会重复执行，并通过双向绑定，将 username 显示出来。

ngIf

作用：根据条件决定是否显示或隐藏这个元素。

例子：

// .html

<p *ngIf="false"></p>
<p *ngIf="a > b"></p>
<p *ngIf="username == &#39;张三&#39;"></p>
<p *ngIf="myFunction()"></p>

讲解：

• 永远不会显示

• 当 a 大于 b 的时候显示

• 当 username 等于 张三 的时候显示

• 根据 myFunction() 这个函数的返回值，决定是否显示

ngSwitch

作用：防止条件复杂的情况导致过多的使用 ngIf。

例子：

// .html

<p class="container" [ngSwitch]="myAge">
 <p *ngSwitchCase="&#39;10&#39;">age = 10</p>
 <p *ngSwitchCase="&#39;20&#39;">age = 20</p>
 <p *ngSwitchDefault="&#39;18&#39;">age = 18</p>
</p>

讲解：

[ngSwitch] 先与目标进行绑定，ngSwitchCase 列出每个可能性，ngSwitchDefault 列出默认值。

ngStyle

作用：可以使用动态值给特定的 DOM 元素设定 CSS 属性。

例子：

// .ts
backColor: string = 'red';

// .html
<p [style.color]="yellow">
 你好，世界
</p>
<p [style.background-color]="backColor">
 你好，世界
</p>
<p [style.font-size.px]="20">
 你好，世界
</p>
<p [ngStyle]="{color: &#39;white&#39;, &#39;background-color&#39;: &#39;blue&#39;, &#39;font-size.px&#39;: &#39;20&#39;}">
 你好，世界
</p>

讲解：

• 直接设置颜色为 yellow。

• 设置背景颜色为 backColor，并可以在 .ts 文件中对 backColor 的值进行修改。

• 设置字体大小，需要注意的是 只写 font-size 会报错，必须在后面加上 .px。当然 .em .% 都是可以的。

• 前三种都是只设置一个，写 [ngStyle] 可以同时写多个，使用花括号包住里面的内功。需要注意的是连字符 - 是不允许出现在对象的键名当中的，如果使用 background-color 等时需要加上单引号。

ngClass

作用：动态地设置和改变一个给定 DOM 元素的 CSS类。

例子：

// .scss
.bordered {
 border: 1px dashed black;
 background-color: #eee;
}

// .ts
isBordered: boolean = true;
 
// .html
<p [ngClass]="{bordered: isBordered}">
 是否显示边框
</p>

讲解：

• scss 中设置了样式，相当于你建了一个 class="bordered"

• ngIf

• 기능:

  조건에 따라 이 요소를 표시할지 숨길지 결정하세요.

예:

.html

<p ngNonBindable>
 {{我不会被绑定}}
</p>

설명:

표시되지 않습니다

a가 b보다 클 때 표시됩니다

사용자 이름이 Zhang San과 같을 때 표시됨


myFunction() 함수의 반환 값에 따라
ngSwitch

표시 여부가 결정됩니다. 너무 많이 발생 ngIf를 사용하십시오.

예:


rrreee

설명:
[ngSwitch] 먼저 대상에 바인딩하고 ngSwitchCase는 각 가능성을 나열하고 ngSwitchDefault는 기본값을 나열합니다.
ngStyle🎜🎜🎜🎜🎜기능: 🎜동적 값을 사용하여 특정 DOM 요소에 대한 CSS 속성을 설정할 수 있습니다. 🎜🎜🎜🎜예: 🎜🎜🎜🎜rrreee🎜🎜🎜🎜설명: 🎜🎜
🎜🎜색상을 직접 노란색으로 설정하세요. 🎜🎜🎜🎜배경색을 backColor로 설정하고 .ts 파일에서 backColor 값을 수정합니다. 🎜🎜🎜🎜글꼴 크기를 설정하세요. 글꼴 크기만 입력하면 끝에 .px를 추가해야 한다는 점에 유의하세요. 물론 .em .%도 모두 허용됩니다. 🎜🎜🎜🎜처음 3개는 하나만 설정하는 것이고, 여러개를 동시에 작성하려면 [ngStyle]을 사용하여 내부 기능을 묶으세요. background-color 등을 사용하는 경우에는 개체의 키 이름에 하이픈 -을 사용할 수 없습니다. 🎜🎜🎜🎜🎜🎜ngClass🎜🎜🎜🎜🎜기능: 🎜주어진 DOM 요소의 CSS 클래스를 동적으로 설정하고 변경합니다. 🎜🎜🎜🎜예: 🎜🎜🎜🎜rrreee🎜🎜🎜🎜설명: 🎜🎜
🎜🎜scss에서 스타일을 설정하는 것은 class= "를 구축하는 것과 동일합니다. 경계가 있음" . 🎜🎜🎜🎜ts에는 .scss에 스타일을 표시할지 여부를 결정하는 데 사용되는 새로운 isBordered가 있습니다. 🎜🎜🎜🎜html은 bordered가 표시되는지 판단하는 기준으로 isBordered를 사용합니다. 🎜🎜🎜🎜🎜🎜ngNonBindable🎜🎜🎜🎜🎜기능: 🎜페이지의 특정 부분을 바인딩하지 않도록 Angular에 지시합니다. 🎜🎜🎜🎜예: 🎜🎜🎜🎜rrreee🎜🎜🎜🎜설명: 🎜🎜🎜🎜ngNonBindable을 사용하면 중괄호가 문자열로 함께 표시됩니다. 🎜🎜🎜🎜요약🎜🎜🎜🎜일상적인 개발에서는 ngFor와 ngIf를 가장 많이 사용해야 하므로 먼저 작성합니다. ngNonBindable의 경우 실제 개발에서 한 번도 사용해본 적이 없어서 그냥 정보만 확인하고 테스트해본 뒤 적어봤습니다. 🎜🎜위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! 🎜🎜관련 권장 사항: 🎜🎜🎜AngularJs에서 템플릿 캐싱을 비활성화하는 방법🎜🎜🎜🎜🎜AngularJs에서 브라우저 캐시를 지우는 방법🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 Angular4의 내장 지시문의 기본 사용법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!