Angular 2中的組件如何通過調用其方法彈出另一個組件？

我設計一個彈出組件，它的目的是展示，並通過以下方法設置回和前變量之類的就必然的invokation隱藏。Angular 2中的組件如何通過調用其方法彈出另一個組件？

hide() { 
    this.back = this.back.replace(/[ ]?shown/, ""); 
    this.front = this.front.replace(/[ ]?shown/, ""); 
} 

show() { 
    this.back += "shown"; 
    this.front += "shown"; 
}

問題是我希望彈出窗口可以從其他組件調用，而不是它們的一部分。實際上，我所瞄準的應用程序的標記如下。

<navbar></navbar> 
<sidebar></sidebar> 
<filter></filter> 
<poppy></poppy>

但我不知道如何調用它。我對導航欄中的點擊作出了反應，並檢測到該請求應該觸發彈出窗口彈出。

if(notImplementedYet) { 
    ??? 
}

我GOOGLE了這個問題，但我沒有真正得到的正確方法是清晰的圖像接近它。例如，我看到Input和Outputhere，但我無法判斷它是否可以遠程適用於我的需要。

我也看到this但它沒有告訴我很多，可能是由於缺少Angular的經驗。另外，我擔心父母與孩子/孩子對父母的方法會導致非常討厭的調用結構。

來源

2017-02-28 Konrad Viltersten

這是通常使用的組件間通信的服務。請參閱[此處的實現示例]（http://stackoverflow.com/a/4204194）。它顯示了應用程序中的任何組件如何通過服務顯示/觸發SpinnerComponent。我認爲你可以適應你的情況。另外，在官方文檔中查看組件通信的[其他技術]（https://angular.io/docs/ts/latest/cookbook/component-communication.html）。 – AngularChef

您可以在要從中調用彈出窗口的組件中使用@Output。然後您可以簡單地使用模板變量來調用彈出組件中的顯示或隱藏方法。

例如，你的代碼在導航欄中點擊時，可以顯示你的彈出：

import { Component, Output, EventEmitter } from '@angular/core'; 
@Component({ 
    selector: 'navbar', 
    templateUrl: './nav-bar.component.html' 
}) 
export class NavComponent { 
    @Output() onClickNav: EventEmitter<any> = new EventEmitter(); 
    onClick():void { 
     this.onClickNav.emit(null); 
    } 
} 

<navbar (onClickNav)="popup.show()"></navbar> 
<poppy #popup ></poppy>

來源

2017-02-28 12:21:35 Faly

檢查在這篇文章中的答案 http://stackoverflow.com/questions/42460418/angular-2-ng2-bootstrap-parent-component-call-modal-show-in-child-component-n/42463516#42463516 – Aravind

它似乎做的工作。爲清晰起見+1。現在，我嘗試發送一個對象而不是* null *，像這樣：'this.onClickNav.emit（{驢：「屁股」}）''。但是，我不確定如何在調用時將它連接到'popup.show（???）'部分。建議？ –

您可能正在尋找ViewChild。

基本上你可以實例一個ViewChild變量引用子組件，然後你可以調用它的方法。

來源

2017-02-28 12:05:09 maxeber

當孩子/父母之間的道路很長時，它是如何工作的？我看到維護問題...建議？ –

Angular 2中的組件如何通過調用其方法彈出另一個組件？

回答

相關問題