Угловой компонент с несколькими шаблонами/HTML-файлами

Обновлено: Для тех, кто наткнется на это позже, я решил эту проблему с помощью router-outlet. Я нашел этот учебник YouTube очень полезным.

У меня есть компонент Contents (<app-contents></app-contents) с динамическим содержимым, так же, как блог имеет тот же базовый макет, но разное сочетание текста/изображений/ссылок/HTML для каждой страницы или сообщения.

<div class = "wrapper">
  <app-contents></app-contents>
</div>

Мне кажется, что вместо того, чтобы создавать кучу разных компонентов, этот Contents компонент может просто использовать разные HTML-файлы или разные шаблоны. В идеале я мог бы разделить шаблоны на отдельные HTML-файлы. Структура компонента Contents может быть такой:

- contents
    - contents.component.css // <--- referenced by all contents templates
    - contents.component.html // <--- default template
    - lesson1.contents.component.html
    - lesson2.contents.component.html
    - lesson3.contents.component.html
    - lesson4.contents.component.html
    - lesson5.contents.component.html
    - contents.component.ts
    - contents.component.spec.ts

Я хочу, чтобы <app-contents></app-contents> содержал шаблон по умолчанию с серией ссылок. Что-то типа:

<ol>
  <li><a [routerLink] = "['/lessons', 'lesson-1']">Lesson 1</a></li>
  <li><a [routerLink] = "['/lessons', 'lesson-2']">Lesson 2</a></li>
  <li><a [routerLink] = "['/lessons', 'lesson-3']">Lesson 3</a></li>
  <li><a [routerLink] = "['/lessons', 'lesson-4']">Lesson 4</a></li>
  <li><a [routerLink] = "['/lessons', 'lesson-5']">Lesson 5</a></li>
</ol>

Затем, в app.module.ts, я бы настроил маршрут с параметром маршрута следующим образом:

const appRoutes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full'},
  { path: 'lessons/:lesson', component: ContentsComponent},
];

В этот момент я немного потерялся в том, что делать. 1) Есть ли лучший способ загрузки этих разных шаблонов, которые в основном используют общую информацию о компонентах (например, стили и т. д.), а не описанный выше метод с несколькими файлами HTML внутри компонента? и 2) куда я должен перейти, чтобы проложить этот путь к его правильному шаблону? Я просмотрел документацию по ngIf/ngSwitch, ng-template и ряду других возможных решений, но не могу связать их с этим конкретным сценарием.