각도 학습에서는 지침과 파이프라인에 대해 설명합니다.

지령

지시문은操作DOM Angular에서 제공하는 방법입니다. 명령어는属性指令와结构指令로 구분됩니다.

• 속성 지시어: 기존 요소의 모양이나 동작을 수정하고 [] 로 묶습니다.

• 구조적 지침: 레이아웃을 수정하려면 DOM 노드를 추가 및 삭제하고, 명령 접두사로 * 사용하세요. [관련 추천 튜토리얼: "angular 튜토리얼"]

1. 내장 명령어

1.1 *ngIf

조건에 따라 DOM 노드를渲染하거나 DOM 노드를移除.

<div *ngIf="data.length == 0">더 이상 데이터 없음</div>

<div *ngIf="data.length > 0; then dataList else noData"></div>
<ng-template #dataList>강좌 목록</ng-template>
<ng-template #noData>더 이상 데이터가 없습니다</ng-template>

ng-template ng-template 사용하여 템플릿을 정의한 후 ng-container 및 templateOutlet 지침을 사용하여 템플릿을 정의할 수 있습니다.

<ng-템플릿 #로드>
 <button (click)="login()">로그인</button>
 <button (click)="sigup()">가입</button>
</ng-템플릿>
<ng-container *ngTemplateOutlet="로딩">
</ng-container>

1.2 [hidden]

조건에 따라 DOM 노드를显示하거나 DOM 노드(표시)를隐藏.

<div [hidden]="data.length == 0">강좌 목록</div>
<div [hidden]="data.length > 0">더 이상 데이터가 없습니다</div>

1.3 *ngFor

데이터를 탐색하여 HTML 구조

인터페이스 List {를

  아이디: 번호
  이름: 문자열
  나이: 숫자
}

목록: 목록[] = [
  { ID: 1, 이름: "장산", 나이: 20 },
  { ID: 2, 이름: "lee思", 나이: 30 }
]

<리
    *ngFor="
      목록의 항목을 보자;
      i=인덱스라고 하자;
      isEven = 짝수라고 하자;
      isOdd = 홀수라고 하자;
      isFirst = 첫째로 놔두세요;
      isLast = 마지막으로 두십시오;
    "
  >
  </li>

<li *ngFor="목록 항목 삭제; trackBy: 식별"></li>

식별(색인, 항목){
  item.id 반환; 
}

2. 사용자 정의 명령

요구사항: 요소의 기본 배경색, 마우스가 안으로 움직일 때의 배경색, 마우스가 밖으로 움직일 때의 배경색을 설정합니다.

<div [appHover]="{ bgColor: 'skyblue' }">Hello Angular</div>

import { AfterViewInit, Directive, ElementRef, HostListener, Input } from "@angular/core"

// 매개변수 유형 인터페이스 옵션을 수신합니다.
  bgColor?: 문자열
}

@지령({
  선택기: "[appHover]"
})
내보내기 클래스 HoverDirective는 AfterViewInit을 구현합니다.
  //매개변수 수신 @Input("appHover") appHover: 옵션 = {}
  // 작업할 DOM 노드 요소: HTMLElement
	// constructor(private elementRef: ElementRef)에서 작동할 DOM 노드를 가져옵니다.
    this.element = this.elementRef.nativeElement
  }
	// 컴포넌트 템플릿의 초기 완료 후 요소의 배경색을 설정합니다. ngAfterViewInit() {
    this.element.style.BackgroundColor = this.appHover.bgColor ||
  }
	// 요소에 마우스 이동 이벤트를 추가합니다. @HostListener("mouseenter") enter() {
    this.element.style.BackgroundColor = "분홍색"
  }
	//@HostListener("mouseleave") 요소에 대한 마우스 아웃 이벤트 추가 Leave() {
    this.element.style.BackgroundColor = "하늘색"
  }
}

파이프

파이프라인의 역할은格式化组件模板数据입니다.

1. 내장 파이프라인

• 날짜 날짜 형식

• 통화 통화 형식

• 대문자

• 대문자 소문자로 변환

• json 형식 json 데이터

{{ 날짜 | 날짜: "yyyy-MM-dd" }}

2. 사용자 지정 파이프라인

요구 사항: 지정된 문자열을 초과할 수 없습니다. 지정된 길이

<!-- 이것은... -->
{{'테스트입니다' | 요약: 3}}

// summary.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@파이프({
   이름: '요약' 
});
내보내기 클래스 SummaryPipe는 PipeTransform을 구현합니다.
    변환(값: 문자열, 제한?: 숫자) {
        if (!value)는 null을 반환합니다.
        ActualLimit = (한계) ? 제한: 50;
        return value.substr(0, ActualLimit) + '...';
    }
}

// app.module.ts
'./summary.pipe'에서 { SummaryPipe } 가져오기
@NgModule({
    선언: [
      요약파이프
    ] 
});