분류 전체보기
-
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..
-
03 라이프사이클 후크(Lifecycle hooks) 08앵귤러/03 템플릿&데이터 바인딩 2017. 8. 20. 11:56
AfterContentAfterContent 샘플은 Angular가 외부 콘텐츠를 컴포넌트로 투영 한 후 Angular가 호출한 AfterContentInit() 및 AfterContentChecked() 후크를 탐색합니다. 콘텐츠 투영컨텐츠 투영은 컴포넌트 외부에서 HTML 컨텐츠를 가져 와서 해당 컨텐츠를 지정된 위치의 컴포넌트 템플릿에 삽입하는 방법입니다.이전 AfterView 예제에서 이 변형을 고려하십시오. 이번에는 템플릿 내에 자식 뷰를 포함하는 대신 AfterContentComponent의 부모로 부터 컨텐트를 가져옵니다. 부모 템플릿은 다음과 같습니다. AfterContentParentComponent (template excerpt) ` ` 태그는 태그 사이에 위치합니다. 내용을 컴포넌트..
-
03 라이프사이클 후크(Lifecycle hooks) 07앵귤러/03 템플릿&데이터 바인딩 2017. 8. 20. 11:54
AfterViewAfterView 샘플은 컴포넌트의 자식 뷰를 만든 후 Angular 가 호출하는 AfterViewInit() 및 AfterViewChecked() 후크를 탐색합니다.다음은 에 영웅의 이름을 표시하는 자식뷰 입니다. ChildComponent @Component({ selector: 'my-child-view', template: '' }) export class ChildViewComponent { hero = 'Magneta'; } AfterViewComponent는 템플릿 내에 이 자식 뷰를 표시합니다. AfterViewComponent (template) template: ` -- child view begins -- -- child view ends --` 다음 후크는 @View..
-
03 라이프사이클 후크(Lifecycle hooks) 06앵귤러/03 템플릿&데이터 바인딩 2017. 8. 20. 11:46
DoCheck()DoCheck 훅을 사용하여 Angular가 자동으로 인식하지 못하는 변경 사항을 감지하고 조치를 취하십시오.DoCheck 샘플은 다음과 같이 ngDoCheck() 훅으로 OnChanges 샘플을 확장합니다. DoCheckComponent (ngDoCheck) ngDoCheck() { if (this.hero.name !== this.oldHeroName) { this.changeDetected = true; this.changeLog.push(`DoCheck: Hero name changed to "${this.hero.name}" from "${this.oldHeroName}"`); this.oldHeroName = this.hero.name; } if (this.power !== t..
-
03 라이프사이클 후크(Lifecycle hooks) 05앵귤러/03 템플릿&데이터 바인딩 2017. 8. 20. 11:45
OnChanges ()Angular는 컴포넌트(또는 디렉티브)의 입력 프로퍼티에 대한 변경 사항을 감지 할 때마다 해당 ngOnChanges() 메서드를 호출합니다. 이 예제는 OnChanges 훅을 모니터링합니다. on-changes.component.ts (excerpt) ngOnChanges(changes: SimpleChanges) { for (let propName in changes) { let chng = changes[propName]; let cur = JSON.stringify(chng.currentValue); let prev = JSON.stringify(chng.previousValue); this.changeLog.push(`${propName}: currentValue = ${..