앵귤러
-
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..
-
04 컴포넌트 상호작용 04앵귤러/03 템플릿&데이터 바인딩 2017. 8. 22. 21:52
부모는 자식 이벤트를 수신합니다.자식 컴포넌트는 이벤트가 발생할 때 이벤트를 내보내는 EventEmitter 프로퍼티를 노출합니다. 부모는 해당 이벤트 속성에 바인딩하고 해당 이벤트에 반응합니다.자식의 EventEmitter 프로퍼티는 출력 프로퍼티입니다. 일반적으로 다음 VoterComponent에는 @Output 데코레이션으로 장식되어 있습니다. component-interaction/src/app/voter.component.ts import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'my-voter', template: ` {{name}} Agree Disagree ` }) expo..
-
04 컴포넌트 상호작용 03앵귤러/03 템플릿&데이터 바인딩 2017. 8. 22. 21:51
ngOnChanges ()로 입력 속성 변경 가로채기OnChanges 라이프 사이클 후크 인터페이스의 ngOnChanges() 메소드를 사용하여 프로퍼티 값을 변경하는 것을 감지하고 이에 대처합니다.이 VersionChildComponent는, major 및 minor 입력 프롭퍼티의 변경을 검출하여 변경을 리포트하는 로그 메세지를 작성합니다. component-interaction/src/app/version-child.component.ts import { Component, Input, OnChanges, SimpleChange } from '@angular/core'; @Component({ selector: 'version-child', template: ` Version {{major}}.{{..
-
04 컴포넌트 상호작용 02앵귤러/03 템플릿&데이터 바인딩 2017. 8. 22. 21:50
설정자로 입력 프로퍼티 변경 가로채기입력 프로퍼티 설정자를 사용하여 부모로부터의 값을 가로채서 처리합니다.자식 NameChildComponent에서 name입력 프로퍼티의 설정자는 이름에서 공백을 제거하고 빈 값을 기본 텍스트로 바꿉니다. component-interaction/src/app/name-child.component.ts import { Component, Input } from '@angular/core'; @Component({ selector: 'name-child', template: '"{{name}}"' }) export class NameChildComponent { private _name = ''; @Input() set name(name: string) { this._nam..
-
04 컴포넌트 상호작용 01앵귤러/03 템플릿&데이터 바인딩 2017. 8. 22. 21:49
컴포넌트 상호작용이 책에는 둘 이상의 컴포넌트가 정보를 공유하는 공통 컴포넌트 통신 시나리오에 대한 레시피가 들어 있습니다.라이브 예제 /다운로드 예제를 참조하십시오. 입력 바인딩으로 부모에서 자식으로 데이터 전달HeroChildComponent에는 일반적으로 @Input 데코레이터로 장식 된 두 개의 입력 프로퍼티가 있습니다. component-interaction/src/app/hero-child.component.ts import { Component, Input } from '@angular/core'; import { Hero } from './hero'; @Component({ selector: 'hero-child', template: ` {{hero.name}} says: I, {{hero..