분류 전체보기
-
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 테마 클래스를 문서 엘리먼트에 적용 할..
-
05 컴포넌트 스타일 01앵귤러/03 템플릿&데이터 바인딩 2017. 8. 27. 15:25
컴포넌트 스타일Angular 응용프로그램은 표준 CSS로 스타일을 사용합니다. 즉, CSS 스타일시트, 셀렉터, 규칙 및 미디어 쿼리에 대해 알고있는 모든 것을 Angular 응용프로그램에 직접 적용 할 수 있습니다.또한 Angular는 컴포넌트 스타일을 컴포넌트와 함께 묶을 수 있으므로 일반 스타일 시트보다 모듈화된 디자인이 가능합니다.이 페이지에서는 이러한 컴포넌트 스타일을 로드하고 적용하는 방법에 대해 설명합니다.Plunker에서 라이브 예제 / 다운로드 예제를 실행하고 코드를 다운로드 할 수 있습니다. 컴포넌트 스타일 사용작성한 모든 Angular 컴포넌트에 대해 HTML 템플릿뿐만 아니라 해당 템플릿과 함께 제공되는 CSS 스타일을 정의하고 필요한 셀렉터, 규칙 및 미디어 쿼리를 지정할 수 있습..
-
04 컴포넌트 상호작용 07앵귤러/03 템플릿&데이터 바인딩 2017. 8. 22. 21:54
부모컴포넌트와 자식컴포넌트는 서비스를 통해 의사 소통합니다.부모 컴포넌트와 자식 컴포넌트는 인터페이스가 해당 패밀리 내에서 양방향 통신을 가능하게하는 서비스를 공유합니다.서비스 인스턴스의 범위는 부모 컴포넌트와 그 자식 컴포넌트 입니다. 이 컴포넌트 하위 트리 외부의 컴포넌트는 서비스 또는 통신에 액세스 할 수 없습니다.이 MissionService는 MissionControlComponent를 여러 개의 AstronautComponent 자식과 연결합니다. component-interaction/src/app/mission.service.ts import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injec..
-
04 컴포넌트 상호작용 06앵귤러/03 템플릿&데이터 바인딩 2017. 8. 22. 21:54
부모는 @ViewChild()를 호출합니다.지역 변수 접근법은 간단하고 쉽습니다. 하지만 부모-자식 연결작업은 부모 템플릿이 완벽히 처리해야 하기 때문에 한계가 있습니다. 부모 컴포넌트 자체는 자식에 접근 할 수 없다.부모 컴포넌트 클래스의 인스턴스가 하위 컴포턴트 값을 읽거나 쓰거나 자식 컴포넌트 메서드를 호출해야하는 경우 로컬 변수 기술을 사용할 수 없습니다.부모 컴포넌트 클래스가 그러한 종류의 액세스를 필요로 할 때, 부모 클래스에 자식 컴포넌트를 ViewChild로 주입하십시오.다음 예제는 동일한 카운트 다운 타이머 예제를 사용하여 이 기법을 보여줍니다. 외관이나 행위가 바뀌지는 않습니다. 자식 CountdownTimerComponent도 동일합니다.다음은 부모 컴포넌트인 CountdownView..
-
04 컴포넌트 상호작용 05앵귤러/03 템플릿&데이터 바인딩 2017. 8. 22. 21:53
부모는 지역 변수를 통해 자식과 상호 작용합니다.부모 컴포넌트는 데이터 바인딩을 사용하여 하위 속성을 읽거나 하위 메서드를 호출 할 수 없습니다. 두 요소 모두를 수행하려면 자식 엘리먼트에 대한 템플릿 참조 변수를 만든 다음 다음 예제와 같이 부모 템플릿 내에서 해당 변수를 참조하십시오.다음은 0까지 카운트 다운하고 로켓을 발사하는 자식 CountdownTimerComponent입니다. 시계를 제어하는 start 와 stop 메소드가 있으며 자체 템플릿에 카운트 다운 상태 메시지를 표시합니다. component-interaction/src/app/countdown-timer.component.ts import { Component, OnDestroy, OnInit } from '@angular/cor..