訪問子組件的所有父組件函數

我創建一個組件，其中我將有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'; 
     } 
    }

來源

2017-03-02 user3334406

反過來思考，使用'@ Output'來達到這個特定目的。 –

你是什麼意思？林不知道這是否可以完成輸出 – user3334406

@Harry Ninh是對的，你應該使用裝飾者@Output或創建一個特定的服務。這是一個工作Plunker與@output：

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

也有幾個錯字在你原來的plunker，所以你應該檢查你爲他人錯別字代碼。

這裏是它如何工作的：

家長聽的輸出

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

在子組件，進口@Output和EventEmitter

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

啓動輸出：

@Output() endEditing = new EventEmitter();

在相關功能中發出事件

this.endEditing.emit();

來源

2017-03-02 23:33:43 mickdev

洛爾你的答案的作品，我寫了與你一樣的重擊者，但它不工作。你能告訴我我做錯了什麼嗎？ http://plnkr.co/edit/ZmyFjwhM6tPZXubTfeGA?open=app%2Fapp.component.ts&p=preview – user3334406

你糾正了你所有的錯別字嗎？例如'this.setNameCd（）;'到'this.setNameCb（）;'？ – mickdev

OMG b和d看起來如此相似，我無法得到我做錯了什麼，謝謝:) – user3334406

訪問子組件的所有父組件函數

回答

相關問題