Angular несколько отличается от других фреймворков, которые просто «включают» фрагменты HTML на вашу страницу, как если бы они были скопированы / вставлены туда. Вы получаете сообщение об ошибке Unexpected closing div tag, потому что каждый компонент должен иметь действительный HTML, что означает, что не может быть никаких незакрытых тегов в любом данном компоненте Angular. Angular на самом деле довольно строг в том, как он проверяет ваш HTML. Другие фреймворки, такие как Wordpress, который использует PHP, могут отличаться, если вы можете быть уверены, что сервер собирается объединить все HTML вместе перед его обслуживанием.
Angular отличается тем, что его "компилятор" проверяет структуру каждого компонента как автономную единицу или ... "компонент" ... который может отображаться независимо от других компонентов. Следовательно, каждый компонент Angular должен запускаться и заканчиваться в рамках компонента. Вот один из способов добиться своего кода. Есть некоторые исключения из этого, например, когда вы хотите визуализировать содержимое непосредственно между открывающим и закрывающим тегом HTML вашего Angular компонента, но, вероятно, это не то, что вам нужно здесь делать.
Здесь предлагаемые подходы.
1. Если у вас есть маршрутизация (НАСТОЯТЕЛЬНО РЕКОМЕНДУЕТСЯ)
(app.component. html)
<!-- Each "view" will have this header appended to the top -->
<app-header></app-header>
<!-- the main contents of each "view" is rendered here depending on your route (URL) in the address bar -->
<router-routlet></router-outlet>
<!-- Each "view" will have this header appended to the bottom -->
<app-footer></app-footer>
, вы можете перейти к различным компонентам через URL-адрес, например: localhost:4200/view-1 или localhost:4200/view-2. И есть много других преимуществ использования этого подхода. Но верхний и нижний колонтитулы остаются обернутыми вокруг всего содержимого, которое отображается в компоненте <router-outlet>, и вам нужно было только определить каждый из этих тегов в одном месте. Узнайте больше о маршрутизации с помощью Angular 2 +
Более сложный подход - просто включить теги app-header и app-footer в каждый компонент. Такой подход нарушает принцип DRY (не повторяйтесь), ИМХО.
2. Если вы хотите включить верхний / нижний колонтитул в каждый компонент:
<!-- some.component.html -->
<app-header></app-header>
<!-- "view" 1 contents -->
<app-footer></app-footer>
<!-- some-other.component.html -->
<app-header></app-header>
<!-- "view" 2 contents -->
<app-footer></app-footer>
3. Если вы пытаетесь применить общую структуру макета к своим представлениям:
Если все ваши страницы пытаются использовать общую структуру (например, с фреймворками макета, такими как bootstrap), где вы хотите, чтобы все было в страница должна подпадать под определенную структуру div с заданными классами, вы можете просто изменить подход №1 и использовать комбинацию основных app.component.html и Angular Routing , чтобы объединить каждое представление в общее начало и конец теги. Наиболее распространенный и эффективный способ сделать это в Angular 2+ - использовать маршрутизацию для управления компонентами, которые отображаются между открывающим и закрывающим тегами. Что касается дополнительных стилей class1 и class2 go, вы можете изменить их стиль в app.component. css или styles. css (или любой другой разновидности таблицы стилей, которую вы используете).
(app.component. html)
<div class='class1'>
<div class='class2'>
<!-- The magic to render your different views happens here -->
<router-outlet></router-outlet>
</div>
</div>
Вот реальный пример игрового движка, над которым я работаю. Он использует Angular Материал для применения основной c боковой панели / основной структуры содержимого, но вы можете видеть, как у меня есть некоторые настройки структурных элементов, обертывающие мой <router-outlet>, который затем отвечает за рендеринг различных представлений в моем приложении. .
<mat-drawer-container class="class1">
<mat-drawer mode="side" position='end'>
<app-controls></app-controls>
</mat-drawer>
<mat-drawer-content class='class2>
<app-menu></app-menu>
<!-- views are rendered here -->
<router-outlet></router-outlet>
</mat-drawer-content>
</mat-drawer-container>
Надеюсь, это поможет!