Угловой многокомпонентный дизайн страницы

Question

Технологический стек:

Угловой 6

Угловой материал

Я работаю над одностраничным приложением в Angular 6 and Angular material, которое имеет толькоone PAGE.

Страница состоит из трех разделов, кроме верхнего и нижнего колонтитула, как:

Поиск раздела Загрузить раздел списка Список записей раздела учащихся

Я хочу подать заявление на Angularкак модульное и, следовательно, решил использовать ниже три компонента для представления трех разделов:

SearchComponent StudentRecordComponent DownloadComponent

Мой вопрос:

Эти отдельные компоненты будут иметь OWNHTML и final PAGE будут содержать ссылки на все эти компоненты.(index.html загрузит корневой компонент)

Значит, каждый раздел страницы будет составлять ИНДИВИДУАЛЬНЫЕ КОМПОНЕНТЫ. Правильно ли мой дизайн в этом отношении?

Более конкретно, псевдокод для HTML для страницы приведен ниже как шаблон для корневого компонента (app.component.html)

Шаблон корневого компонента должен содержать ссылку на все эти компоненты.

Таким образом, типичная реализация будет выглядеть так:

@Component({
  selector: 'app-comp',
  styleUrls: ['./app.component.css'],
  templateUrl : './app.component.html'
})
export class AppComponent {
  title = 'app';
}

, тогда как app.component.html будет иметь разметку ниже.

 <div id="mainDiv">

 <div>
    <search-component></search-component> <!-- Search component HTML --> 
 </div>

 <div>
    <download-component></download-component> <!-- Download component HTML --> 
 </div> 

 <div>
    <StudentRecordComponent></StudentRecordComponent>  <!-- Student Record component HTML --> 
 </div>

</div>