Как загрузить страницу в определенном div, используя angular7

Question

В моем проекте у меня есть левое боковое меню (например, боковая навигация), которое разработано с использованием mat-tree и правой стороны, которое показывает содержимое, когда мы выбираем или нажимаем меню на левой стороне. Здесь выделение желтым цветом строится с использованием дерева матов sideNav и содержимого Если мы выберем какой-либо параметр слева, скажем, например, если я выберу «флажок», как в указанной ссылке Содержимое при выбоременю , то правая сторона должна загружать контент без обновления и сохранять левую часть навигации. Пример ссылки для справки: https://material.angular.io/components/checkbox/overview

Примечание. У меня уже есть файл app.component.html. Это левое и правое содержимое разработано в diff component.html. Поэтому мне понадобится еще один компонент, отличный от app.component.html. Я пытался иметь в компоненте. Когда я перемещаюсь, он направляется на новую страницу. Я хочу показать на этой же странице справа.

Answer 1

Вы можете использовать маршрутизацию: https://angular.io/guide/router

В шаблоне вашего корневого компонента (app.component.html) вы можете иметь следующую структуру:

<app-with-mat-tree></app-with-mat-tree>
<router-outlet></router-outlet>

Answer 2

Чтобы загрузить любой компонент в определенном разделе страницы, вам нужно использовать <router-outlet></router-outlet> тег

Я создал простую демонстрацию для вашего понимания: https://stackblitz.com/edit/angular-mof1tg

HappyКодировка:)