從角度的應用程序的全球回調

由於持續集成，我目前正在試圖讓2個JS應用程序運行在同一頁面上（一個在Angular 2中，其他在React中）以相互通信。目前，所有的數據共享都是在頁面的窗口範圍內使用對象之間發生的（不理想，但很直接），並且由於數據不重要，所以它會做。這是什麼樣子從角度的應用程序的全球回調

<script> 
window.sharedStuff = {oscar_winner: "LALALAND", news: "FAKE"} 
</script> 

// The angular 2 Application 
<my-app> 
</my-app> 

// React App 
<div class="react-app"> 
</div>

不過，我有問題，從應用角度將作出反應的應用程序可以收聽和執行在某些操作設置回調。基本上，當一個Angular組件發生特定事件時，我想通知React應用程序它已經發生。我怎樣才能做到這一點？我可以從兩個角度訪問窗口範圍並作出反應，所以理想情況下，我想使用window.sharedStuff本身來定義響應應用程序可以綁定的回調函數。但是我找不到有關如何解決這個問題的任何文檔（也許是因爲這是一個獨特/奇怪的情況）。

我該怎麼辦？非常感謝！

來源

2017-02-28 navinpai

您可以實現簡單的觀察者模式，使Angular應用廣播事件，以及React訂閱這些事件。 – dfsq

這就是我說過的你不同意的事情嗎？我的例子是如何爲點擊事件添加事件偵聽器的簡單示例，對於觀察者模式，同樣的概念也適用。 –

@navinpai檢查我設置的這個簡單的例子：http://plnkr.co/edit/NT1eGQUvoKSAnH9ZwgeB?p=info – dfsq

對於像您這樣的簡單情況，您始終可以創建中介或某種Observable模式的實現。例如快速和簡單的一個可能是這樣的：

window.observer = { 
    listeners: {}, 

    subscribe (event, callback) { 
    this.listeners[event] = this.listeners[event] || [] 
    this.listeners[event].push(callback) 
    }, 

    broadcast (event, data) { 
    if (Array.isArray(this.listeners[event])) { 
     this.listeners[event].forEach(callback => callback(data)) 
    } 
    } 
}

而且它可以通過角2個應用程序被用來與broadcast方法推送數據。反應在另一方面的應用程序可以訂閱同一window.observer並設置它的狀態：

window.observer.subscribe('name.selected', name => { 
    this.setState({ name }) 
})

檢查簡單的演示用角2和反應應用說話像好朋友：http://plnkr.co/edit/NT1eGQUvoKSAnH9ZwgeB?p=preview

來源

2017-02-28 16:44:28 dfsq

爲什麼不向窗口對象添加事件偵聽器，並讓您的React應用程序觸發由Angular拾取的事件，反之亦然？

window.addEventListener('click', function() { alert('hello world') });

來源

2017-02-28 16:04:02

這個問題與DOM事件無關。 – dfsq

這個概念應該是一樣的，設置一個自定義事件併爲它添加一個監聽器。 –

從角度的應用程序的全球回調

回答

相關問題