Angular4의 내장 지시문의 기본 사용법에 대해
- 不言원래의
- 2018-06-25 10:49:001604검색
다음 글은 주로 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 == '张三'"></p> <p *ngIf="myFunction()"></p>
讲解：
永远不会显示
当 a 大于 b 的时候显示
当 username 等于 张三 的时候显示
根据 myFunction() 这个函数的返回值，决定是否显示
ngSwitch
作用：防止条件复杂的情况导致过多的使用 ngIf。
例子：
// .html <p class="container" [ngSwitch]="myAge"> <p *ngSwitchCase="'10'">age = 10</p> <p *ngSwitchCase="'20'">age = 20</p> <p *ngSwitchDefault="'18'">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: 'white', 'background-color': 'blue', 'font-size.px': '20'}">
你好，世界
</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과 같을 때 표시됨
ngSwitch
표시 여부가 결정됩니다. 너무 많이 발생 ngIf를 사용하십시오.
설명: [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 중국어 웹사이트의 기타 관련 기사를 참조하세요!