분류 전체보기
-
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 라이브러리에 라이프 사이클 후크 인터페이스 중 하나 이상을 구..
-
02 템플릿 구문 12앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 11:11
NgSwitch 디렉티브NgSwitch는 JavaScript switch 문과 같습니다. 스위치 조건에 따라 여러 엘리먼트 중에서 하나의 엘리먼트를 표시 할 수 있습니다. Angular는 선택한 엘리먼트만 DOM에 넣습니다.NgSwitch는 실제로 이 예제에서 볼 수있는 NgSwitch, NgSwitchCase 및 NgSwitchDefault와 같은 세 개의 협력 디렉티브 집합이 있습니다. src/app/app.component.html NgSwitch는 컨트롤러 디렉티브입니다. 스위치 값을 리턴하는 표현식에 바인드 하십시오. 이 예제의 emotion값은 문자열이지만 스위치 값은 모든 유형이 될 수 있습니다.[ngSwitch]에 바인딩하십시오. NgSwitch는 구조 디렉티브가 아니기 때문에 속성 디렉티..
-
02 템플릿 구문 11앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 11:09
템플릿 입력 변수hero 앞의 let 키워드는 hero라는 템플릿 입력 변수를 만듭니다. ngFor 디렉티브는 부모 컴포넌트의 heroes 프로퍼티에 의해 리턴 된 heroes 배열을 반복하고 매 반복마다 hero를 배열의 현재 항목으로 설정합니다.hero의 속성에 액세스하려면 ngFor 호스트 엘리먼트 내에서 hero 입력 변수를 참조하고 그 하위 엘리먼트 내에서 hero 입력 변수를 참조합니다. 여기서는 보간에서 처음 참조 된 다음 컴포넌트의 hero 프로퍼티에 바인딩으로 전달됩니다. src/app/app.component.html {{hero.name}} Index와 *ngForNgFor 디렉티브 컨텍스트의 index 프로퍼티는 각 반복에서 항목의 0부터 시작하는 인덱스를 리턴합니다. 템플릿 입력 ..
-
02 템플릿 구문 10앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 11:08
내장 구조 디렉티브구조 디렉티브는 HTML 레이아웃을 담당합니다. 일반적으로 DOM은 호스트 엘리먼트를 추가, 제거 및 조작하여 DOM 구조를 형성하거나 변형합니다.구조 디렉티브에 대한 자세한 내용은 구조 디렉티브 가이드에서 다룹니다.l 별표 (*)로 디렉티브 이름 앞에 붙이는 이유l 를 사용하여 디렉티브에 적합한 호스트 요소가 없을 때 요소를 그룹화l 자신의 구조 디렉티브를 작성하는 방법.l 요소에 하나의 구조 디렉티브 만 적용이 섹션에서는 일반적인 구조 디렉티브에 대해 소개합니다.l NgIf - 조건부로 DOM에 요소를 추가하거나 제거.l NgFor - 목록의 각 항목에 대한 템플릿 반복l NgSwitch - 대체뷰간에 전환하는 디렉티브 집합 NgIfNgIf 디렉티브는 해당 엘리먼트 (호스트 엘리먼트..
-
02 템플릿 구분 09앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 11:07
내장 디렉티브Angular의 이전 버전에는 70 가지 이상의 내장 디렉티브가 포함되었습니다. 커뮤니티는 더 많은 기여를 했으며, 내부 애플리케이션을 위해 무수한 사설 디렉티브들이 만들어졌습니다.Angular에서 이러한 디렉티브가 많이 필요하지 않습니다. 좀 더 능력 있고 표현력이 뛰어난 Angular 바인딩 시스템을 사용해도 동일한 결과를 얻을 수 있습니다. 다음과 같은 간단한 바인딩을 작성할 때 클릭을 처리 할 수있는 디렉티브를 만드는 이유는 무엇입니까? Save 복잡한 작업을 단순화하는 디렉티브의 이점은 여전히 있습니다. Angular는 많지는 않지만 내장 디렉티브와 함께 제공됩니다. 여러분은 많지는 않지만 자신의 디렉티브를 작성할 수 있습니다.이 절에서는 어트리뷰트 디렉티브 또는 구조 디렉티브로..