다음 글은 주로 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"
기능:
조건에 따라 이 요소를 표시할지 숨길지 결정하세요.예:
.html <p ngNonBindable> {{我不会被绑定}} </p>
설명:
a가 b보다 클 때 표시됩니다
사용자 이름이 Zhang San과 같을 때 표시됨
ngSwitch
표시 여부가 결정됩니다. 너무 많이 발생 ngIf를 사용하십시오.
설명: [ngSwitch] 먼저 대상에 바인딩하고 ngSwitchCase는 각 가능성을 나열하고 ngSwitchDefault는 기본값을 나열합니다.ngStyle🎜🎜🎜🎜🎜기능: 🎜동적 값을 사용하여 특정 DOM 요소에 대한 CSS 속성을 설정할 수 있습니다. 🎜🎜🎜🎜예: 🎜🎜🎜🎜rrreee🎜🎜🎜🎜설명: 🎜🎜
class= "를 구축하는 것과 동일합니다. 경계가 있음"
. 🎜🎜🎜🎜ts에는 .scss에 스타일을 표시할지 여부를 결정하는 데 사용되는 새로운 isBordered가 있습니다. 🎜🎜🎜🎜html은 bordered가 표시되는지 판단하는 기준으로 isBordered를 사용합니다. 🎜🎜🎜🎜🎜🎜ngNonBindable🎜🎜🎜🎜🎜기능: 🎜페이지의 특정 부분을 바인딩하지 않도록 Angular에 지시합니다. 🎜🎜🎜🎜예: 🎜🎜🎜🎜rrreee🎜🎜🎜🎜설명: 🎜🎜🎜🎜ngNonBindable을 사용하면 중괄호가 문자열로 함께 표시됩니다. 🎜🎜🎜🎜요약🎜🎜🎜🎜일상적인 개발에서는 ngFor와 ngIf를 가장 많이 사용해야 하므로 먼저 작성합니다. ngNonBindable의 경우 실제 개발에서 한 번도 사용해본 적이 없어서 그냥 정보만 확인하고 테스트해본 뒤 적어봤습니다. 🎜🎜위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요! 🎜🎜관련 권장 사항: 🎜🎜🎜AngularJs에서 템플릿 캐싱을 비활성화하는 방법🎜🎜🎜🎜🎜AngularJs에서 브라우저 캐시를 지우는 방법🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜위 내용은 Angular4의 내장 지시문의 기본 사용법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!