앵귤러
-
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..
-
06 동적 컴포넌트(Dynamic Component) 01앵귤러/03 템플릿&데이터 바인딩 2017. 8. 27. 15:34
동적 컴포넌트동적 컴포넌트 로더컴포넌트 템플릿이 항상 고정되어 있는 것은 아닙니다. 응용프로그램은 런타임시에 새 컴포넌트를 로드해야 하는 경우가 있습니다.이 책은 ComponentFactoryResolver를 사용하여 컴포넌트를 동적으로 추가하는 방법을 보여줍니다.이 책에 실린 예제 / 다운로드 예제를 보세요. 동적 컴포넌트 로딩다음 예는 동적 광고 배너를 작성하는 방법을 보여줍니다.주인공은 배너를 통해 순환하는 여러 가지 광고로 광고 캠페인을 계획하고 있습니다. 여러 팀에서는 자주 새로운 광고 컴포넌트를 추가합니다. 따라서 정적 컴포넌트 구조가 있는 템플릿을 사용하는 것은 비현실적입니다.대신 광고 배너 템플릿의 컴포넌트에 고정 된 참조없이 새 컴포넌트를 로드하는 방법이 필요합니다.Angular는 컴포넌..
-
05 컴포넌트 스타일 04앵귤러/03 템플릿&데이터 바인딩 2017. 8. 27. 15:27
뷰 캡슐화앞에서 설명한 것처럼 컴포넌트 CSS 스타일은 컴포넌트의 뷰에 캡슐화되며, 나머지 응용프로그램에는 영향을 미치지 않습니다.이 캡슐화가 컴포넌트별로 이루어지는 방식을 제어하려면 컴포넌트 메타 데이터에서 뷰 캡슐화 모드를 설정할 수 있습니다. 다음 모드 중에서 선택하십시오.l Native뷰 캡슐화는 브라우저의 네이티브 섀도우 DOM 구현 (MDN 사이트의 섀도우 DOM 참조)을 사용하여 컴포넌트의 호스트 엘리먼트에 섀도우 DOM을 첨부 한 다음 해당 섀도우 DOM 내에 컴포넌트 뷰를 배치합니다. 컴포넌트의 스타일은 섀도우 DOM 내에 포함됩니다.l Emulated 뷰 캡슐화는 CSS 코드를 사전 처리(및 이름 바꾸기)하여 섀도우 DOM의 동작을 에뮬레이션하여 CSS를 컴포넌트의 뷰에 효과적으로 적용..
-
05 컴포넌트 스타일 03앵귤러/03 템플릿&데이터 바인딩 2017. 8. 27. 15:26
컴포넌트 스타일 로딩컴포넌트에 스타일을 추가하는 방법에는 여러 가지가 있습니다.l styles 또는 styleUrls 메타 데이터를 설정l 템플릿 HTML에서 인라인.l CSS 가져 오기.앞에서 설명한 범위 지정 규칙은 모든 로딩 패턴에 적용됩니다. 메타 데이터의 스타일@Component 데코레이터에 styles 배열 프로퍼티를 추가 할 수 있습니다. 배열의 각 문자열(대개 하나의 문자열)은 CSS를 정의합니다. src/app/hero-app.component.ts @Component({ selector: 'hero-app', template: ` Tour of Heroes `, styles: ['h1 { font-weight: normal; }'] }) export class HeroAppCompone..
-
05 컴포넌트 스타일 02앵귤러/03 템플릿&데이터 바인딩 2017. 8. 27. 15:26
스페셜 셀렉터컴포넌트 스타일에는 그림자 DOM 스타일 스코핑의 (W3C 사이트의 CSS 스코핑 모듈 레벨 1 페이지 설명된) 가지 스페셜 셀렉터가 있습니다. 다음 절에서는 이러한 셀렉터에 대해 설명합니다. :host:host 가상 클래스 셀렉터를 사용하면 컴포넌트를 사용하는 엘리먼트의 스타일을 타겟팅 할 수 있습니다 (컴포넌트의 템플릿 내부에 있는 대상 엘리먼트와 반대 됨). src/app/hero-details.component.css :host { display: block; border: 1px solid black; } :host-context때로는 컴포넌트의 뷰 외부에서 일부 조건을 기반으로 스타일을 적용하는 것이 유용한 경우가 있습니다. 예를 들어 CSS 테마 클래스를 문서 엘리먼트에 적용 할..