앵귤러
-
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 = ${..
-
03 라이프사이클 후크(Lifecycle hooks) 04앵귤러/03 템플릿&데이터 바인딩 2017. 8. 20. 11:43
OnInit 및 OnDestroy 감시하기이 두 스파이 훅으로 비밀리에 가면 엘리먼트가 초기화되거나 파기되는 시기를 알 수 있습니다.이것은 디렉티브에 대한 완벽한 침투 작업입니다. 영웅들은 그들이 지켜봐지고 있다는 것을 결코 알지 못할 것입니다. 제쳐두고, 두 가지 핵심 사항에 주의를 기울이십시오. 1. Angular 호출은 디렉티브와 컴포넌트의 메소드를 후크합니다. 2. 스파이 디렉티브는 직접 변경할 수없는 DOM 객체에 대한 통찰력을 제공합니다. 분명히 네이티브 구현을 손댈 수는 없습니다. 서드파티 컴포넌트도 수정할 수 없습니다. 그러나 지시어를 이용해서 둘 다 볼 수 있습니다. 다음의 부적 절한 스파이 디렉티브는 단순하고, ngOnInit() 및 ngOnDestroy() 훅으로 구성되어 있으며, 주..
-
03 라이프사이클 후크(Lifecycle hooks) 03앵귤러/03 템플릿&데이터 바인딩 2017. 8. 20. 11:41
라이프 사이클의 예라이브 예제/다운로드 예제는 루트 AppComponent의 제어하에 컴포넌트로 제공되는 일련의 연습을 통해 작동중인 라이프 사이클 후크를 보여줍니다. 이들은 공통 패턴을 따릅니다: 부모 컴포넌트는 라이프 사이클 후크 방법 중 하나 이상을 보여주는 자식 컴포넌트의 테스트 장비로 사용됩니다.다음은 각 실습에 대한 간단한 설명입니다. 컴포넌트 설명 Peek-a-boo 모든 라이프사이클 후크를 보여줍니다. 각 후크 메소드는 스크린상에 로그를 기록합니다. Spy 디렉티브에도 라이프사이클 후크가 있습니다. SpyDirective는 ngOnInit 및 ngOnDestroy 훅을 사용하여 스파이가 작성된 엘리먼트가 작성 또는 삭제 될 때 기록 할 수 있습니다. 이 예에서는 SpyDirective를 부..
-
03 라이프사이클 후크(Lifecycle hooks) 02앵귤러/03 템플릿&데이터 바인딩 2017. 8. 20. 11:39
라이프 사이클 순서생성자를 호출하여 컴포넌트/디렉티브 만든 후 Angular는 다음 순서로 라이프 사이클 후크 메서드를 호출합니다. 후크 목적과 타이밍 ngOnChanges() Angular 가 데이터 바인딩 된 입력 프로퍼티를 설정할 때 응답합니다. 이 메소드는 현재 및 이전 프로퍼티 값의 SimpleChanges 오브젝트를 수신합니다. ngOnInit()보다 먼저 호출되고, 하나 이상의 데이터 바인딩 입력 프로퍼티가 변경 될 때마다 호출됩니다. ngOnInit() Angular가 먼저 데이터 바인딩 된 프로퍼티를 표시하고 디렉티브/컴포넌트의 입력 프로퍼티를 설정 한 후에 디렉티브/컴포넌트를 초기화합니다. 첫 번째 ngOnChanges() 이후에 한 번 호출됩니다. ngDoCheck() Angular가..
-
03 라이프사이클 후크(Lifecycle hooks) 01앵귤러/03 템플릿&데이터 바인딩 2017. 8. 20. 11:33
라이프사이클 훅 컴포넌트의 수명주기는 Angular가 관리합니다.Angular는 컴포넌트를 만들고, 렌더링하고, 자식 컴포넌트를 만들고 렌더링하고, 데이터 바인딩 프로퍼티가 변경 될 때 이를 검사하고, DOM에서 제거하기 전에 컴포넌트를 삭제합니다.Angular는 이러한 주요 삶의 순간에 대한 가시성을 제공하고 발생할 때 행동 할 수있는 라이프 사이클 후크를 제공합니다.디렉티브에는 컴포넌트 내용 및 뷰와 관련된 후크를 제외한 라이프 사이클 후크 세트가 있습니다. 컴포넌트 라이프 사이클 후크 개요디렉티브와 컴포넌트 인스턴스는 Angular가 수명주기를 생성하고, 업데이트 및 소멸시킴으로써, 수명주기를 가집니다. 개발자는 Angular의 core 라이브러리에 라이프 사이클 후크 인터페이스 중 하나 이상을 구..