2017-04-10 164 views
9

我想在Angular 4的子組件中調用父方法(deletePhone)。 我該如何正確執行該操作?Angular 4在子組件中調用父方法

我父組件的樣子:

export class ContactInfo implements OnInit { 
    phoneForm: FormGroup; 
    phones: Phone[]; 


    constructor(private fb: FormBuilder, 
      private userService: UserService) { 
    } 

    ngOnInit() { 
     this.userService.getDataPhones().subscribe(
      phones => { 
       this.phones = phones; 
      }); 

     this.phoneForm = this.fb.group({ 
      phone: ['', [Validators.pattern(PHONE_PATTERN)]] 
     }); 
    } 

    deletePhone(phone: Phone) { 
     this.userService.deleteUserPhone(phone) 
      .subscribe(res => { 
       let index = this.phones.indexOf(phone); 
       if (index > -1) { 
        this.phones.splice(index, 1); 
       } 
     }); 
    } 
} 

回答

22
class ChildComponent { 
    @Output() someEvent = new EventEmitter<string>(); 

    callParent() { 
    this.someEvent.next('somePhone'); 
    } 
} 

ContactInfo的模板

<child-component (someEvent)="deletePhone($event)" 
+0

嘿!這很簡單,謝謝!)) –

+1

您可以添加預期類型,如「新EventEmitter ()」:) – Nicolas

相關問題