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

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> 

Каждой подтаблица хочет оказывать различное содержимое на боковую панель. Очевидно, это было бы легко, если бы в subview включалась область боковой панели, но, допустим, важно сохранить структуру, и мы не хотим копировать шаблонную панель боковой панели в каждом представлении.

Есть ли какой-либо способ для просмотра ребенком объявить «экспортировать этот дополнительный компонент для отображения в другое место?» Я представляю себе что-то вроде инъекции родительского представления и вызова метода на нем, но я не могу понять это из документации.

Answer 1

Простой демо:

Это довольно просто, на самом деле. Просто import и inject вашей боковой панели или любой другой модели просмотра и вызовите метод или обновите свойство.

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

Решение с Compose:

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

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

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

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

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

Answer 2

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

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