css - Angular 局部 View

Question

我正在处理一个很长的 Angular 表格。我想知道我是否可以将它分成许多不同的 View 并在主视图中引用它们中的每一个。

<div class="container">
   <div class="row" id="part1">
      <div class="col-md-12">First Section</div>
   </div>
   <div class="row" id="part2">
      <div class="col-md-12">Second Section</div>
   </div>
   <div class="row" id="part3">
      <div class="col-md-12">Third Section</div>
   </div>
   ...
</div>

Since my file is too long, is there a way using angular to have each section in a separate file and reference each of them in the main file? For example:


 <div class="container>
    "import section 1"
    "import section 2"
    "import section 3"
 </div>

Thanks.

Answer 1

创建您的部分 View (组件)；

使用 Angular CLI 转到 powershell/comand line/etc;

第一步

ng g c import-section-1
ng g c import-section-2
ng g c import-section-3

将在 app 文件夹下为您创建 3 个文件夹(这意味着您将拥有 3 个新组件)；

第二步

根据需要编辑您的组件，然后引用您需要的组件；

 <div class="container>
    <app-import-section-1></app-import-section-1>
    <app-import-section-2></app-import-section-2>
    <app-import-section-3></app-import-section-3>
 </div>