Aurelia:如何在路由器视图中修改侧边栏内容? [英] Aurelia: How can I modify sidebar content from inside a router view?

问题描述

我正在努力解决内部组件"如何调整外部组件"的内容的问题.假设我有一个看起来像这样的应用程序模板:

I'm trying to wrap my head around how "inner components" can adjust the content of "outer components". Let's say I have an application template that looks something like this:

<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>

每个子视图都希望将不同的内容呈现到侧边栏.显然，如果子视图包含侧边栏区域本身，这将很容易，但是可以说，保留结构很重要，我们不想在每个视图上都复制侧边栏的样板.

Each subview wants to render different content to the sidebar. Obviously this would be easy if the subview included the sidebar area itself, but let's say it is important to preserve the structure and we don't want to replicate the boilerplate of the sidebar across every view.

子视图是否可以声明导出此额外的组件以在其他地方显示"?我想像是注入父视图并在其上调用方法之类的东西，但是我无法从文档中弄清楚.

Is there any way for a child view to declare "export this extra component for display in another place?" I imagine something like injecting the parent view and calling a method on it, but I can't figure it out from the documentation.

推荐答案

简单演示:

实际上，这非常简单.只需import和inject您的侧边栏或任何其他视图模型，然后调用方法或更新属性即可.

It's fairly simple, actually. Just import and inject your sidebar or any other viewmodel and call a method or update a property.

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

Compose解决方案:

如果您想更加详尽，可以设置一个compose view.bind变量，以使边栏根据设置的值拉入另一个视图/视图模型.

If you wanted to get more elaborate, you could set a compose view.bind variable to that your sidebar would pull in a different view/viewmodel based on the set value.

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

替代方法:

如果您不想导入，也可以使用eventAggregator从路由器视图发布事件，并订阅从侧边栏监听该事件并采取相应的措施.这对于大型应用程序设置非常有用，在这种情况下，您不想将它们紧密地绑在一起，而是希望边栏通过始终在触发器发布时做出响应来对不可预测的路由模式做出正确的反应.

If you don't want to import, you could also use the eventAggregator to publish an event from the router view and subscribe to listen to that event from your sidebar and act accordingly. This would work well for a large app setting where you didn't want to tie them too closely together but wanted the sidebar to react correctly to unpredictable routing patterns by always responding when triggers were published.

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

这篇关于Aurelia:如何在路由器视图中修改侧边栏内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！