4장. 컴포넌트
컴포넌트
앵귤러에서 화면하는 구성하는 중요한 구성요소이다.
웹 컴포넌트
HTML , CSS, 자바스크립트를 하나의 단위로 묶어주는 기술이다. 웹 컴포넌트 기술은 하나의 기능이 아니라 여러가지 기술들이 합쳐져 하나의 웹 컴포넌트를 구성
웹 컴포넌트는 앵귤러2 컴포넌트의 기반기술이다 앵귤러 2 컴포넌트는 웹 컴포넌트의 기술요소를 기반으로 하므로 웹 컴포넌트를 이해하면 앵귤러 컴포넌트를 이해하는 데 도움된다.
- HTML 템플릿
- 템플릿 호출
- 쉐도우 DOM
- 커스텀 엘리먼트
중첩컴포넌트 85p
부모 컴포넌트가 여러 자식컴포넌트를 포함하는 경우
컴포넌트 트리 86p
평면적으로 나열된 컴포넌트가 어떤 포함 관계를 가지는지 알수있게 해줌
컴포넌트 기반 개발 87p
컴포넌트를 개발의 중심에 두고 개발하는것.
컴포넌트 89p
컴포넌트 내부는 크게 import 영역, @Component 장식자(selector, template, styles로 구성됨), 컴포넌트 클래스 영역으로 나뉜다.
부모가 자식한테 값 전달
부모가 속성바인드를 통해 값을 전달하면 자식이 값을 받는 방법은 2가지가 있다.
@input 장식자 99p
외부에서 전달된 값을 받기 위해 사용하는 장식자
inputs 102p
부모가 name1, name2 속성으로 어떠한 값을 전달하면 자식은 @Component장식자 안에 inputs:[‘name1’,’name2’]로 값을 받을 수 있다. 자식의 클래스에서도 name1, name2를 지정해줘야함
자식이 부모한테 값 전달 103p
@Output 장식자로 선언한 변수를 EventEmitter로 초기화한다. 그리고 부모에게 보낼 시점이 되면 emit()메소드를 사용해 부모로 이벤트를 전달한다.
@ViewChild 장식자 107p
화면 DOM에 접근해 첫 번째로 위치한 지시자의 내부 상태(지시자의 속성값)나 정보(컴포넌트 지시자의 경우 내부 메서드)를 가져온다
@ViewChildren 장식자 109p
@ViewChild는 하나의 엘리먼트 상태를 갖고왔지만 @ViewChildren 장식자는 여러 지시자의 상태를 한번에 취할 수 있다.
@ContentChild 장식자 112p
콘텐츠 DOM을 탐색해 지시자 엘리먼트의 상태를 QueryList에 담는 역할을 한다.
@ContentChildren 장식자 114p
컴포넌트 내부에 위치한 엘리먼트나 지시자에 정보를 담고 있는 쿼리리스트를 얻는다.
쉐도우 DOM의 선택자 118p
그냥 styles:[‘span{font-style}’] 이런식으로 하면 해당 컴포넌트의 span만 적용된다. 이를 범위를 넓히거나 좁힐때 사용하는것이 쉐도우 DOM의 선택자이다.
1.:host 선택자
2.:host-context 선택자
3.:deep 선택자