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';
}
}
이 특정 목적을 위해'@ Output'을 사용하십시오. –
어땠어? 이것이 출력으로 할 수 있는지 확실하지 않은 Im – user3334406