Angular2模態對話框

AppService服務 AppComponent - > HeroComponent - > WeaponComponent - > ButtonComponent

當有人點擊該按鈕（ButtonComponent），我想在打開一個模式對話框AppComponent。

我能想到的最好的辦法是讓在AppService服務一個dialogObservable。 ButtonComponent設置observable，AppComponent監聽它，並在有對話框設置時顯示對話框。

這已經感覺有點亂。

但使情況變得更糟，我還需要在對話框按鈕。當有人點擊「確定」按鈕時，我想從WeaponComponent調用一個動作。就我所知，這是不可能的。那麼我該怎麼做？在服務中創建另一個observable，並在WeaponComponent中監聽它。

這種感覺很凌亂，我覺得必須有一個更好的辦法。我無法弄清楚。

來源

2016-10-04 Kris

我也有類似的問題，我在我的根模塊組件添加一個模式，並提供ModalService翻過我的應用程序解決了這個問題。

ModalService用作事件調度器，調度模態事件。

@Injectable() 
export class ModalService{ 
    public registerModal(name:string, onPop:()=>void):void; 
    public popModal(name:string):void; 
}

這樣你ModalComponent可以在任何地方（你可以有很多不同的名字模態的）和：

只有簽名（很容易理解，實現並不難）爲例你可以從任何地方彈出它，因爲你只需要得到ModalService。

請注意，要使此項工作，您必須只使用ModalService的一個實例，因此它必須在您的module.forRoot()方法中聲明。

編輯：

要解決的背景問題，你可以聲明你的函數，並將其存儲在一個變量，像這樣：

function foo():any{ 
}

成爲

foo=():any => { 
}

那麼你可以傳遞使用this.foo的模態回調方法，它不會鬆動上下文。

來源

2016-10-04 09:57:25 Supamiu

如果我正確理解你，我以類似的方式去做。我在服務中創建模式。但我最大的問題是如何處理對話框中的按鈕點擊。我希望對話框中按鈕的點擊事件觸發打開對話框的組件中的處理程序，而不是在對話框本身或服務中。我可以在打開對話框時使用該功能。但它被拉出了它的範圍。因此，從該事件處理函數中，我無法再訪問原始組件。所以我仍然堅持這一點。 – Kris

你的模塊應該在你的模塊基礎組件中，這樣它仍然在它的模塊範圍內，但是你使用css將它放置到全屏+頂部z-index並完成。 – Supamiu

在我的情況下，這是不可能的，不幸的是。另外，對話只是一個例子，但也可能是應用程序中某處的不同警報消息，但在組件外部。現在，我通過將「this」傳遞給模式來解決這個問題，儘管它有點麻煩...... – Kris

Angular2模態對話框

回答

相關問題