Question

技术堆栈：

角度6

角材料

我正在Angular 6 and Angular material中处理一个只有一个PAGE的单页应用程序。

该页面分为三部分，除了页眉和页脚：

搜索部分下载区列出学生记录部分

我想将Angular应用程序模块化，因此决定使用以下三个组件来代表三个部分：

SearchComponent StudentRecordComponent DownloadComponent

我的问题是：

这些单独的组件将具有其 OWN HTML ，并且最终页面将具有对所有这些组件的引用。（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>

角多组件页面设计

0 个答案: