분류 전체보기
-
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; } 작동중인 ..
-
07 어트리뷰트 디렉티브(Attribute Directive) 02앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 12:36
사용자가 시작한 이벤트 응답현재 myHighlight는 단순히 엘리먼트 색상을 설정합니다. 이 디렉티브를 보다 동적으로 코딩할 수 있습니다. 사용자가 엘리먼트 안팎으로 마우스를 이동하면 강조 표시 색을 설정하거나 지워서 응답 할 수 있습니다.다음과 같이 임포트한 심볼 목록에 HostListener 및 Input을 추가하세요. src/app/highlight.directive.ts (imports) import { Directive, ElementRef, HostListener, Input } from '@angular/core'; 그런 다음 마우스가 들어가거나 나올 때 응답하는 두 개의 이벤트 핸들러를 추가하십시오. HostListener 데코레이터는 각 이벤트 핸들러를 장식합니다. src/app/hig..
-
07 어트리뷰트 디렉티브(Attribute Directive) 01앵귤러/03 템플릿&데이터 바인딩 2017. 9. 2. 12:33
어트리뷰트 디렉티브Attribute 디렉티브는 DOM 엘리먼트의 모양이나 동작을 변경합니다.어트리뷰트 디렉티브 예 / 다운로드 예를 사용해 보세요. 디렉티브 개요Angular에는 다음 세 가지 디렉티브가 있습니다.l 컴포넌트 – 템플릿이 있는 디렉티브.l 구조 디렉티브 - DOM 엘리먼트를 추가 및 제거하여 DOM 레이아웃을 변경합니다.l 어트리뷰트 디렉티브 - 엘리먼트, 컴포넌트 또는 다른 디렉티브의 모양 또는 동작을 변경합니다.컴포넌트는 세 가지 디렉티브 중 가장 일반적입니다. 당신은 QuickStart 가이드에서 컴포넌트를 처음 보았습니다.구조 디렉티브 뷰의 구조를 변경합니다. 두 가지 예가 NgFor와 NgIf입니다. 구조 디렉티브에서 이들에 대해 배웁니다.어트리뷰트 디렉티브는 요소의 어트리뷰트로..
-
06 동적 컴포넌트(Dynamic Component) 03앵귤러/03 템플릿&데이터 바인딩 2017. 8. 27. 15:36
AdComponent 인터페이스광고 배너에서 모든 컴포넌트는 공통 AdComponent 인터페이스를 구현하여 API를 표준화하여 데이터를 컴포넌트로 전달합니다.다음은 두 가지 샘플 컴포넌트와 참조 용 AdComponent 인터페이스입니다. src/app/hero-job-ad.component.ts import { Component, Input } from '@angular/core'; import { AdComponent } from './ad.component'; @Component({ template: ` {{data.headline}} {{data.body}} ` }) export class HeroJobAdComponent implements AdComponent { @Input() data: a..
-
06 동적 컴포넌트(Dynamic Component) 02앵귤러/03 템플릿&데이터 바인딩 2017. 8. 27. 15:36
컴포넌트 로딩대부분의 광고 배너 구현은 ad-banner.component.ts에 있습니다. 이 예제에서 간단하게하기 위해, HTML은 @Component 데코레이터의 템플릿 프로퍼티에 템플릿 문자열로 있습니다. 엘리먼트는 방금 만든 디렉티브를 적용하는 곳입니다. AdDirective를 적용하려면 ad.directive.ts, ad-host의 셀렉터를 호출하십시오. 대괄호없이 에 적용하십시오. 이제 Angular는 동적으로 컴포넌트를 로드 할 위치를 알고 있습니다. src/app/ad-banner.component.ts (template) template: ` Advertisements ` 엘리먼트는 추가 출력을 표출하지 않으므로 동적 컴포넌트에 적합합니다. 컴포넌트 해결ad-banner.componen..