하위 구성 요소의 모든 상위 구성 요소 기능에 액세스

Question

3 개의 버튼 [ Edit, Cancel, Save ]이있는 구성 요소를 만듭니다. 사용자가 편집 버튼을 클릭하면 저장 및 취소 버튼이 표시되고 저장 버튼을 클릭하면 구성 요소가 생성됩니다. 상위 컴포넌트에서 함수를 트리거하십시오.

문제는 부모에서 ESC 구성 요소로 함수를 전달할 때 상위 지시문의 다른 함수에 액세스 할 수 없다는 것입니다.

참고 구성 요소는 다른 구성 요소의 글로벌 작동로 사용됩니다

Plunker : http://plnkr.co/edit/ZmyFjwhM6tPZXubTfeGA?p=preview&open=app%2Fapp.component.ts

코드 :

<div [hidden]="isEdit"> 
     <button (click)="toggleEdit()">Edit</button> 
    </div> 
    <div [hidden]="!isEdit"> 
     <button (click)="runFunction(); toggleEdit()">Save</button> 
     <button (click)="toggleEdit()">Cancel</button> 
    </div> 

export class EscComponent { 
    @Input() run: Function; 

    runFunction() { 
     console.log('Run Function') 
     this.run() 
    } 

    isEdit = false; 

    toggleEdit() { 
     this.isEdit = !this.isEdit; 
    } 
} 

부모 요소 :

Component usage: <app-esc [run]="setName"></app-esc> 


export class AppComponent { 
     name = 'Angular'; 

     setName() { 
     this.setNameCd(); 
     } 

     setNameCb() { 
     this.name = 'Angular 2 asd'; 
     } 
    } 

Answer 1

@ Harry Ninh가 맞습니다. 장식 자 @Output을 사용하거나 특정 서비스를 만들어야합니다. 당신은 다른 사람의 오타에 대한 코드를 검토해야하므로

http://plnkr.co/edit/wadCAyW5kah0VjVR2m5B?open=app%2Fapp.component.ts&p=preview

당신은 원래 plunker도 몇 가지 오타가 : 여기 @output와 작업 Plunker이다.

@Output() endEditing = new EventEmitter(); 

:

부모

import { Component, Input, Output, EventEmitter } from '@angular/core'; 

출력을 시작 하위 구성 요소, 수입 @Output 및 EventEmitter에서 출력

<app-esc (endEditing)="setName($event)"></app-esc> 

을 듣고 : 여기 그것이 작동하는 방법

입니다

관련 함수에서 이벤트를 내 보냅니다.

this.endEditing.emit();