앵귤러
-
08 구조 디렉티브(Structural Directive) 06앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 13:06
요약라이브 예제 / 예제 다운로드에서 이 가이드의 소스 코드를 다운로드 할 수 있습니다. 다음은 src/app/ 폴더의 소스입니다. src/app/app.component.ts import { Component } from '@angular/core'; import { Hero, heroes } from './hero'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { heroes = heroes; hero = this.heroes[0]; condition = false; logs: string[] = [];..
-
08 구조 디렉티브(Structural Directive) 05앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 13:05
구조 디렉티브 작성이 섹션에서는 NgIf와 반대되는 UnlessDirective 구조 디렉티브를 작성합니다. NgIf는 조건이 true 일 때 템플릿 내용을 표시합니다. UnlessDirective는 조건이 false 일 때 내용을 표시합니다. src/app/app.component.html (myUnless-1) Show this sentence unless the condition is true. 디렉티브를 만드는 것은 컴포넌트를 만드는 것과 비슷합니다.l Directive 데코레이터를 임포트합니다. (Component 데코레이터 대신).l Input, TemplateRef 및 ViewContainerRef를 임포트합니다. 모든 구조 디렉티브를 만들 때 필요합니다.l 디렉티브 클래스에 데코레이터를 적..
-
08 구조 디렉티브(Structural Directive) 04앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 12:53
NgSwitch 디렉티브Angular NgSwitch는 NgSwitch, NgSwitchCase 및 NgSwitchDefault와 같이 협업 명령 집합입니다.다음은 그 예입니다. src/app/app.component.html (ngswitch) NgSwitch (hero.emotion)에 할당 된 스위치 값에 따라 어느 스위치 케이스가 표시될지가 결정됩니다 (있는 경우).NgSwitch 자체는 구조적 디렉티브가 아닙니다. 다른 두 스위치 디렉티브의 동작을 제어하는 어트리뷰트 디렉티브입니다. 그래서 [ngSwitch]라고 쓰고 절대로 *ngSwitch라고 쓰지 않습니다.NgSwitchCase 및 NgSwitchDefault는 구조 디렉티브입니다. 별표(*) 접두어 표기법을 사용하여 엘리먼트에 첨부합니..
-
08 구조 디렉티브(Structural Directive) 03앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 12:48
*ngFor 내부Angular는 *ngFor를 별표(*) 구문에서 템플릿 어트리뷰트를 통해 엘리먼트로 비슷하게 변형합니다.다음은 세 가지 방법으로 작성된 NgFor의 모든 기능을 갖춘 응용프로그램입니다. src/app/app.component.html (inside-ngfor) ({{i}}) {{hero.name}} ({{i}}) {{hero.name}} ({{i}}) {{hero.name}} 이것은 ngIf보다 명백하게 복잡합니다. NgFor 디렉티브에는 본 설명서에 표시된 NgIf보다 많은 필수 기능과 선택 사양이 있습니다. 최소한 NgFor에는 루핑 변수 (let hero)와 목록 (heroes)이 필요합니다.ngFor에 할당 된 문자열에서 이러한 기능을 활성화합니다. 이 기능은 Angular의 마..
-
08 구조 디렉티브(Structural Directive) 02앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 12:46
NgIf 사례 연구NgIf는 가장 단순한 구조 디렉티브이며 이해하기 쉽습니다. 부울 표현식을 사용하여 해당 DOM의 전체를 표시하거나 사라지게 합니다. src/app/app.component.html (ngif-true) Expression is true and ngIf is true. This paragraph is in the DOM. Expression is false and ngIf is false. This paragraph is not in the DOM. ngIf 디렉티브는 CSS로 엘리먼트를 숨기지 않습니다. DOM에서 물리적으로 추가 및 제거합니다. 브라우저 개발자 도구를 사용하여 DOM을 검사하여 사실을 확인하십시오. 맨 위 단락은 DOM에 있습니다. 바닥, 사용하지 않은 단락은 그렇지..
-
08 구조 디렉티브(Structural Directive) 01앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 12:42
구조 디렉티브이 가이드는 Angular가 구조적 디렉티브로 DOM을 조작하는 방법과 동일한 작업을 수행 할 구조적 디렉티브를 작성하는 방법을 살펴 봅니다.라이브 예제 / 예제 다운로드를 사용해보십시오. 구조 디렉티브란?구조 디렉티브는 HTML 레이아웃을 담당합니다. 일반적으로 엘리먼트를 추가, 제거 또는 조작하여 DOM 구조를 모양 짓거나 변형합니다.다른 디렉티브와 마찬가지로 구조 디렉티브를 호스트 엘리먼트에 적용합니다. 디렉티브는 그 호스트 엘리먼트와 그 자손과 관련이있는 모든 것을 수행합니다.구조 디렉티브는 쉽게 인식 할 수 있습니다. 이 예제에서와 같이 별표 (*)가 디렉티브 어트리뷰트 이름 앞에 옵니다. src/app/app.component.html (ngif) {{hero.name}} 대괄호 ..
-
07 어트리뷰트 디렉티브(Attribute Directive) 04앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 12:40
요약이 페이지에서는 다음을 수행하는 방법에 대해 설명했습니다.l 엘리먼트의 동작을 수정하는 어트리뷰트 디렉티브 작성l 템플릿의 엘리먼트에 디렉티브 적용l 디렉티브의 동작을 변경하는 이벤트에 응답l 디렉티브에 값 바인딩최종 소스 코드는 다음과 같습니다. src/app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html' }) export class AppComponent { color: string; } src/app/app.component.html My First Attribute Directive Pick a highlight..
-
07 어트리뷰트 디렉티브(Attribute Directive) 03앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 12:39
테스트용 장치 만들기이 디렉티브가 실제로 어떻게 작동하는지 상상하기 어려울 수 있습니다. 이 섹션에서는 AppComponent를 하니스로 전환하여 라디오 버튼으로 강조 색상을 선택하고 색상 선택을 디렉티브에 바인딩 합니다.다음과 같이 app.component.html을 업데이트하십시오. src/app/app.component.html (v2) My First Attribute Directive Pick a highlight color Green Yellow Cyan Highlight me! 초기 값이 없도록 AppComponent.color를 수정하십시오. src/app/app.component.ts (class) export class AppComponent { color: string; } 작동중인 ..