Угловой контейнерный компонент для лениво загруженных дочерних компонентов

Question

У меня есть home компонент, который я хотел бы реализовать как контейнерный компонент . В соответствии с выбранным путем навигации, благодаря компоненту навигации в своем шаблоне, он будет собирать данные из соответствующей службы и предоставлять их целевому дочернему компоненту, который будет просто компонентом представления .

Я бы хотел лениво загрузить эти дочерние компоненты, так как один из них будет в основном использоваться. Однако при этом я не могу просто передать данные от родителя к потомку через атрибут @Input, так как дочерние компоненты будут отображаться в теге <router-outlet>, что не позволяет мне использовать стратегию уведомления OnPush прямым способом.

Я вижу 3 подхода:

1. получить данные по маршруту и ​​заполнить переменную в сервисе. Но тогда компоненты презентации нуждаются в ссылке на сервис, и он перестанет быть тупым компонентом.
2. Используйте метод resolve() в маршрутизаторе, чтобы предварительно извлекать данные и предоставлять их компоненту.
3. Создайте дополнительный контейнерный компонент для каждого дочернего элемента и переместите сюда логику для извлечения данных и передачи их дочернему элементу @Input. Однако это кажется мне излишним.

Есть ли другой способ, которым я не вижу, чтобы добиться этого?

домашняя маршрутизация

const routes: Routes = [
{
path: "",
component: HomeComponent
children: [
  {
    path: "",
    loadChildren:"shopping-list/shopping-list.module#ShoppingListModule"
  },
  {
    path: "history",
    loadChildren: "history/history.module#HistoryModule"
  }
]
}];

Маршрутизация списка Sopping

const routes: Routes = [{ path: "", component: ListComponent }];

Компонент списка (история имеет ту же структуру)

@Component({
selector: "app-list",
templateUrl: "./list.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListComponent implements OnInit {

 @Input()
 items: ShoppingListItem[];

 ngOnInit() {}
}