Angular 4 - 如何從沒有EventEmitter的子組件調用父方法？

我在我的應用程序下面的層級：Angular 4 - 如何從沒有EventEmitter的子組件調用父方法？

AppComponent » ThemeComponent » HeaderNavComponent

的ThemeComponent有一個方法

qrIconClicked(){ 

    }

我需要調用從HeaderNavComponent此方法。

我該怎麼做？

來源

2017-10-13 Burak

您可以使用'Injector'獲得組件的實例：https://angular.io/api/core/Injector。除此之外，您可以在HeaderNavComponent的'input'上引用該方法，該方法將作爲父級和子級之間的「鏈接」。或者，您可以引用父組件的整個'this'並將其作爲子組件的輸入。這些最後的解決方案都不應該是好的做法，所以我會親自堅持使用噴油器。請檢查以下內容：https：//github.com/angular/angular/issues/10448（檢查草藥的帖子）。此外，您可以使用ViewContainerRef – briosheje

你可以通過在你的孩子HeaderNavComponent組件和氣泡事件定義@Output類型的變量，當你想fromt他的孩子將由父組件ThemeComponent被捕獲並觸發一種方法qrIconClicked()

所以，你的子組件看起來像

export class HeaderNavComponent { 
    @Output() editDone = new EventEmitter<EditEvent>(); 

    onSubmit() { 
    if (some condition) { 
     this.editDone.emit('some value'); 
    } else { 
     this.editDone.emit('other value'); 
    } 
    } 
}

當你從你的孩子組件提高editDone事件，同時呼籲您的孩子組件，您可以指定一個函數時事件將被emmitted打電話。

<header-nav(editDone)="qrIconClicked($event)"><header-nav>

最後你函數將獲得傳遞給父事件從孩子值

qrIconClicked(event: any){ 
    //event will hold value from chilld 
    }

來源

2017-10-13 15:31:36

Angular 4 - 如何從沒有EventEmitter的子組件調用父方法？

回答

相關問題