>  기사  >  웹 프론트엔드  >  Angular4의 내장 지시문의 기본 사용법에 대해

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

不言
不言원래의
2018-06-25 10:49:001602검색

다음 글은 주로 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 = &#39;red&#39;;

// .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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.