사용자 도구

사이트 도구


angular:component-interaction

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판
이전 판
angular:component-interaction [2019/01/15 02:33] taekguangular:component-interaction [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 3: 줄 3:
 1.Parent Component 1.Parent Component
 <code html> <code html>
-  <app-test-component-interaction [parentData]="name"></app-test-component-interaction>+<app-test-component-interaction [parentData]="name"></app-test-component-interaction>
 </code> </code>
 2.Child Component 2.Child Component
줄 14: 줄 14:
   }   }
 } }
 +</code>
 +==== From the child component To the parent component ====
 +1.child component
 +<code html>
 +  <h2>Hello {{ name }}</h2>
 +  <button (click)="firstEvent()">Send Event</button>
 +</code>
 +<code javascript>
 +export class TestComponentInteractionComponent implements OnInit {
 +  @Input('parentData') public name;
 +  @Output() public childEvent = new EventEmitter();
 +
 +  constructor() { }
 +
 +  ngOnInit() {
 +  }
 +  firstEvent(){
 +    this.childEvent.emit('Hey Taekgu');
 +  }
 +}
 +</code>
 +2.parent component
 +<code html>
 +<div>Child message: {{ message }}</div>
 +<app-test-component-interaction (childEvent)="message=$event" [parentData]="name"></app-test-component-interaction>
 </code> </code>
angular/component-interaction.1547519603.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)