본문 바로가기

TypeScript/Angular35

Angular - Dependency ,Injection 개요 Dependency(의존성) 우리가 따로 안만들어도 됨 모듈의 메타데이터가 주입을 해줌, 모듈에 등록만 잘해주면 됨 Service(injection) 서비스는 흔히 말해 단일객체고 싱글톤 객체임. A가 쓰든, B가 쓰든 같은 객체라는 것임 a라는 컴퍼넌트와 b라는 컨퍼넌트를 만들고 one이라는 서비스를 만든 후, one이라는 서비스를 a와 b컴퍼넌트에서 호출을 하게되면 이러한 값이 나온다. a와 b가 따로 출력이 되지만 사실상 같은 인스턴스인 것이다. a에서 서비스의 값을 바꾸게 되면 b도 같이 바뀌게 된다. 서비스는 주로 공통적으로 같은 데이터를 다루는데 표현 계층이 나눠지는 경우에 많이 사용한다. 자세한건 다음에 다시 자세히 설명 하도록하겠다. 2020. 5. 17.
Anguler Component(4) - Component Life Cycle Component Lift Cycle constructor Component 혹은 Directive가 생성 될 때 호출 쉽게 말해 무조건 1빠로 호출 ngOnChanges - DoCheck 최초 초기화 때 호출 Input 프로퍼티가 변경될때 호출 input이 없으면 실행이 안됨 ngOnInit 모든 바인딩 속성을 초기화 한 후 딱 한번 호출( 컴퍼넌트의 초기화가 끝났을 때) 즉 생성자는 Service의 Injection 같은 사항을 처리하고 속성에 대한 초기화는 ngOnImit에서 처리하는게 좋음 ngAfterContentlnit ngContent 사용 시 자식이 초기회 된 직후 호출 ngAfterContentChecked ngContent를 통해 HTML을 받을때 호출 최소/ 변경 시 ngAfterVi.. 2020. 5. 17.
Anguler Component(3) - 컴포넌트 통신 (할아버지->부모->자식 단방향, 양방향 통신) 지난 시간이 이어서 계속 해보겠습니다. parent.ts, html을 이렇게 수정해줍니다. Age를 아래로 보내주기 전에 위에서 입력을 받아야합니다. grand.ts html을 이렇게 수정해 줍니다. 여기서 parent에게 나이를 넣어줍니다. ng-serve로 실행시켜 보시면, grand, parent, child가 3초에 한번 씩 나이가 올라가는 것을 확인 할 수 있습니다. 이렇게 grand, parent, child 컴퍼넌트의 단방향, 양방향 통신에 대해 알아봤습니다. + 부록 child.ts와 html을 이렇게 수정해주면, 이렇게 input의 value 값과 event를 가져올 수 있습니다. 2020. 5. 17.
Anguler Component(3) - 컴포넌트 통신(부모 ->자식 단방향,양방향) 편의성의 위해 반말로 하겠습니다. 오늘은 부모, 자식 간의 단방향.양방향 컴포넌트 통신을 할 예정입니다. child, parent, grand 3개의 컴포넌트를 생성한다. app-> grand grand -> parent parent -> child 이 순으로 템플릿을 호출한다 부모 자식 컴퍼넌트 통신 먼저 child ts, html을 이렇게 작성한다. 나이와 이름을 받을 Input을 만들고 이를 html에 표현하는 표현식이다 그 다음 parent ts, html을 이렇게 작성한다. html에서 보이는 name과 age는 child에서 만든 Input 이름이다. 문자열을 전송 할 때는 []을 생략하고, 변수를 전송할 때는 []를 같이 사용해야한다. 이렇게 나온다면 성공한 것이다. 이렇게 부모->자식으로 .. 2020. 5. 17.

티스토리툴바