Аурелия: Как я могу изменить содержимое боковой панели в представлении маршрутизатора?

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:

Если вы хотите получить более сложные, вы могли бы установить compose Переменная view.bind с тем, что ваша боковая панель будет тянуть другой view / viewmodel в зависимости от установленного значения.

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

Альтернативный подход:

Если вы не хотите импортировать, вы также можете использовать eventAggregator опубликовать событие из представления маршрутизатора и подписаться на прослушивание этого события на боковой панели и действовать соответственно. Это будет хорошо работать для больших приложений, где вы не хотите связывать их слишком тесно, но хотите, чтобы боковая панель правильно реагировала на непредсказуемые шаблоны маршрутизации, всегда отвечая при публикации триггеров.

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

Answer 2

@LStarkey-х <compose> Решение - это то, что я искал, но, чтобы помочь другим, я думаю, что стоит упомянуть два других жизнеспособных решения, которые были предложены мне на других форумах:

1. Просмотр портов. Вы можете указать несколько именованных представлений маршрутизатора в шаблоне, а затем заполнить их, передав viewPorts объект к маршрутизатору вместо указания одного moduleId, Лучшим источником документации является краткая реклама в "Шпаргалке" документов Aurelia.
2. Пользовательские элементы. Это немного больше "наизнанку", но вы можете определить большую часть внешнего контента как пользовательский элемент, который имеет слоты для боковой панели и основного тела; каждое дочернее представление будет определять этот пользовательский элемент и передавать соответствующие фрагменты.