Aurelia：如何從路由器視圖內修改側邊欄內容？

我試圖圍繞「內部組件」如何調整「外部組件」的內容。假設我有一個如下所示的應用程序模板：Aurelia：如何從路由器視圖內修改側邊欄內容？

<template> 
    <div class="sidebar"> 
     <div>Some app-wide content</div> 
     <div> 
      <!-- I want to put some view-specific content here --> 
     </div> 
    </div> 

    <div class="main-body"> 
     <router-view></router-view> 
    </div> 
</template>

每個子視圖都希望將不同的內容渲染到側邊欄。顯然，如果子視圖包含側邊欄區域，這很容易，但假設保留結構非常重要，而且我們不希望在每個視圖上覆制側邊欄的樣板。

有沒有辦法爲子視圖申報「出口顯示這種額外的組件在其他地方嗎？」我想像注入父視圖和調用它的方法，但我無法從文檔中找出它。

來源

2017-02-15 stickfigure

路線可以指定多個視口模塊。 –

簡單的演示：

這是相當簡單的，其實。只需import和inject您的側邊欄或任何其他viewmodel並調用方法或更新屬性。

https://gist.run/?id=745b6792a07d92cbe7e9937020063260

解決方案與撰寫：

如果你想獲得更詳細的，你可以設置一個compose view.bind變量，你的側邊欄會拉基於不同的視圖/視圖模型設定值。

https://gist.run/?id=ac765dde74a30e009f4aba0f1acadcc5

另一種方法：

如果您不希望導入，你也可以使用eventAggregator從路由器視圖發佈事件和訂閱聽取該事件的側欄並相應採取行動。這對於大型應用程序設置很有效，因爲您不想將它們綁定得太緊密，但希望側欄通過始終在觸發器發佈時進行響應來正確反應不可預知的路由模式。

https://gist.run/?id=28447bcb4b0c67cff472aae397fd66c0

來源

2017-02-16 02:15:12 LStarky

我可能會首先查看EventAggregator解決方案。鬆散耦合。 –

謝謝！ ''標籤正是我所期待的 - 動態更改視圖的能力。 – stickfigure

@ LStarkey的<compose>解決辦法是什麼我一直在尋找，而是要幫助別人，我認爲這是值得一提的是建議我在其他論壇兩個其他可行的解決方案：

瀏覽端口。您可以在模板中指定多個命名路由器視圖，然後通過將viewPorts對象傳遞給路由器來填充它們，而不是指定一個moduleId。文檔的最佳來源是Aurelia文檔的「備忘單」中的簡短內容。
自定義元素。它有點「內外」，但你可以將大部分外部內容定義爲一個自定義元素，它具有側欄和主體的插槽;每個子視圖都會定義這個自定義元素並傳入相應的片段。

來源

2017-02-18 21:24:32 stickfigure

Aurelia：如何從路由器視圖內修改側邊欄內容？

回答

相關問題