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：如何从路由器视图内修改侧边栏内容？

回答

相关问题