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

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

0 голосов
/ 30 марта 2019

РЕДАКТИРОВАТЬ: Для тех, кто столкнулся с этим позже, я решил эту проблему с помощью роутера-розетки. Я нашел этот учебник 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 и ряд других возможных решений, но я 'У меня проблемы с подключением к этому конкретному сценарию.

1 Ответ

2 голосов
/ 30 марта 2019

Этого можно добиться, используя проекцию контента, которая в основном позволяет передавать HTML-код компоненту, который отображается внутри него.Хотя нет хорошей официальной документации об этом (по крайней мере, я не знаю), этот пост объясняет это подробно

...