Question

我试图围绕“内部组件”如何调整“外部组件”的内容。假设我有一个看起来像这样的应用程序模板：

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

每个子视图都希望向侧边栏呈现不同的内容。显然，如果子视图包含侧边栏区域本身就很容易，但是让我们说保留结构是很重要的，我们不希望在每个视图中复制侧边栏的样板。

子视图是否有任何方法可以声明“导出此额外组件以便在其他位置显示？”我想像注入父视图并在其上调用一个方法，但我无法从文档中找到它。

Answer 1

简单演示：

实际上，这很简单。只需import和inject您的侧边栏或任何其他视图模型，并调用方法或更新属性。

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

撰写解决方案：

如果您想要更详细一些，可以将compose view.bind变量设置为侧边栏根据设置值拉入不同的视图/视图模型。

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

替代方法：

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

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

Answer 2

@LStarkey的<compose>解决方案正是我所寻求的，但为了帮助其他人，我认为值得一提的是在其他论坛上向我建议的另外两个可行解决方案：

查看端口。您可以在模板中指定多个命名路由器视图，然后通过将viewPorts对象传递到路由器而不是指定单个moduleId来填充它们。最好的文档来源是＆＃34; Cheat Sheet＆＃34; Aurelia docs。
自定义元素。它更多一点内外＆＃34;但您可以将大部分外部内容定义为自定义元素，其中包含侧边栏和主体的插槽;每个子视图都将定义此自定义元素并传入适当的部分。

Aurelia：如何在路由器视图中修改侧边栏内容？

2 个答案: