Angular의 지시어를 아시나요? 다음은angularjs의 세 가지 지시문 지침에 대한 자세한 설명입니다.

이 글에서는 주로 angularjs의 세 가지 명령 유형을 소개합니다. 이 세 가지 유형은 무엇인가요? 이 글에서 이 세 가지 유형을 사용하는 방법을 알려드리겠습니다. 이제 함께 살펴보겠습니다

Angular2에는 다음과 같은 세 가지 유형의 Directives이 있습니다.
1속성 지시어 - 요소의 표시 및 동작을 변경하는 지시어입니다. 예: NgStyle…
2 구조적 지시어 - DOM 요소를 추가 및 제거하여 DOM 구조를 변경하는 지시어입니다. 예: NgFor, NgIf …
3 구성 요소 — 템플릿을 보유하는 지시어입니다.

1. 속성 지침(ngStyle, ngClass)

NgStyle
CSS 속성 이름: value와 같은 모양으로 개체를 바인딩합니다. 여기서 값은 특정 CSS 스타일입니다. 예:

<p></p><p></p>

Note, in ngStyle 설명에서 배경색에는 작은따옴표를 사용하지만 색상에는 작은따옴표를 사용하지 않습니다. 왜 이런가요? ngStyle의 매개변수는 JavaScript 객체이고 색상은 유효한 키이므로 따옴표가 필요하지 않습니다. 하지만 background-color에서는 문자열이 아닌 이상 객체의 키 이름에 하이픈을 사용할 수 없으므로 따옴표를 사용합니다. 일반적으로 꼭 필요한 경우가 아니면 객체 키 주위에 따옴표를 사용하지 마십시오.

//동적 사용

<span>{{ color }} text</span>

//추가 결정

<p></p><p></p>

NgClass
NgClass 명령을 사용하면 여러 클래스를 동시에 추가하거나 제거할 수 있습니다. NgClass는 CSS 클래스 이름: value의 모양으로 객체를 바인딩합니다. 여기서 value의 값은 부울 값입니다. 값이 true이면 해당 유형의 템플릿 요소가 추가되고, 그렇지 않으면 제거됩니다.

//기본 사용법

 <p>此时p不包含bordered 类名</p>
 <p>此时p含有bordered 类名</p>

//Judgment

 <i></i>

2. 구조적 지침(ngIf, ngFor, ngSwitch)

NgIf
부울 유형에 대한 바인딩 지정 표현식에서 표현식이 true를 반환하면 요소와 해당 하위 요소가 DOM 트리 노드에 추가될 수 있으며, 그렇지 않으면 제거됩니다.

표현식 결과가 거짓 값을 반환하는 경우 해당 요소는 DOM에서 제거됩니다.
다음은 몇 가지 예입니다.

<p></p> //不显示
<p> b"></p>//
<p></p> 
<p></p>

NgFor
NgFor 명령어는 특정 작업을 반복적으로 수행하여 데이터를 표시할 수 있습니다. NgFor 지시어는 선택적 인덱스를 지원합니다.
구문은 *ngFor="let item of items"입니다.
let 항목 구문은 항목 배열의 각 요소를 받는 (템플릿) 변수를 지정합니다.
items는 구성요소 컨트롤러의 항목 모음입니다.

this.cities = ['厦门', '福州', '漳州'];
<p>{{ c }}</p>

색인 가져오기
배열을 반복할 때 각 항목의 색인을 가져오고 싶을 수도 있습니다.
ngFor 지시문의 값에 let idx = index 구문을 삽입하고 세미콜론으로 구분하여 인덱스를 얻을 수 있습니다.

<p>{{ num+1 }} . {{ c }}</p>

결과는 다음과 같습니다.
1.
이런 상황이 발생하면 다음과 같이 ngIf를 여러 번 사용할 수 있습니다.

<p>
    </p><p>Var is A</p>
    <p>Var is B</p>
    <p>Var is C</p>
    <p>Var is something else</p>

이 상황을 위해 Angular는 ngSwitch 지시문을 도입했습니다. (자세한 내용을 알고 싶다면 PHP 중국어 웹사이트

AngularJS 개발 매뉴얼을 방문하세요.)
NgSwitch: 제어 조건을 반환하는 값 표현식에 바인딩
NgSwitchCase: 일치 조건을 반환하는 값 표현식에 바인딩

NgSwitchDefault: 기본 요소를 표시하는 데 사용되는 속성, 선택사항. 이를 사용하지 않으면 myVar가 예상 값과 일치하지 않으면 아무것도 렌더링되지 않습니다 ​​

. ngSwitch 지시문을 사용하여 위의 예를 다시 작성합니다.

<p>
    </p><p>Var is A</p>
    <p>Var is B</p>
    <p>Var is C</p>
    <p>Var is something else</p>

3. 구성 요소


속성 지시문을 생성하려면 @Directive 데코레이터로 장식된 컨트롤러 클래스가 하나 이상 필요합니다. @Directive 데코레이터는 이 지시어와 관련된 속성의 이름을 나타내는 선택기 이름을 지정합니다.

다음으로, 간단한 속성 유형 지시어 생성을 시작합니다. 이 지시어의 기능은 user-quotation-view.comComponent.html 페이지가 새로 고쳐질 때 .quotation-area의 최소 높이를 얻는 것입니다.

1. 먼저 명령 이름을 확인합니다. QuotationArea

<p></p>

는 이 명령을 DOM 요소에 대한 속성으로 적용합니다. 즉, 이 명령에 대한 호스트 요소를 찾아야 합니다.

2. 그런 다음 다음 코드 구조를 사용하여 quoteArea.directive.tss 파일을 생성합니다:

import {Component, Directive, ElementRef, OnInit} from '@angular/core';
@Directive({ selector: '[quotationArea]'})
export class QuotationAreaDirective implements OnInit {

  el:ElementRef;
  constructor(el: ElementRef) {
    this.el = el;
  }
  ngOnInit() {
    const $el = $(this.el.nativeElement);
    const windowHeight = document.documentElement.clientHeight; //获取窗口高度
    const bar=document.getElementsByClassName('bar-nav')[0]
    const barHeight =bar.clientHeight;
    const heightValue=windowHeight - barHeight;
    $el.css('height',(heightValue) + 'px');

  }
}

3. 다음으로 Angualr가 자신을 올바르게 식별하고 설정할 수 있도록 module.ts에 정의된 지시문을 명시적으로 선언해야 합니다. 지시.

import {QuotationAreaDirective} from './user-quotation/user-quotation-view/quotationArea.directive';
    declarations: [QuotationAreaDirective]

결과는 사진과 같습니다:

이 글은 여기까지입니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 AngularJS 사용자 매뉴얼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요

위 내용은 Angular의 지시어를 아시나요? 다음은angularjs의 세 가지 지시문 지침에 대한 자세한 설명입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!