Css 角度局部视图

我正在做一个很长的角度表格。我想知道我是否可以将其分解为许多不同的视图，并在主视图中引用它们中的每一个

<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.

第一节
第二节
第三部分
...
由于我的文件太长，有没有办法使用angular将每个部分放在一个单独的文件中，并在主文件中引用每个部分？例如：
创建局部视图（组件）

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

步骤1

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

将在
app
文件夹下为您创建3个文件夹（这意味着您将有3个新组件）

步骤2

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

 <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>

您还可以使用@shadowFoOrm提供的技术，然后将表单拆分为如下所示的选项卡：


您可以在此处找到此代码：
您可以使用
ngIf
仅显示选定的DIC您还可以使用多个子组件并在此处使用它们。对于数据，您可以使用服务或其他工具将所有数据放在同一位置
[ngSwitch]
对于您的情况来说是一个更好的选择，我想我只想减小文件的大小，减少代码行的数量。感谢ShadowFoOrm，我不想要新组件它们都来自同一个组件。我该怎么做？你要求有单独的文件。。。你就是这样做的。当然，您不需要
.scss/.css
文件，甚至不需要
.spec.ts
文件。如果只想使用
.ts文件
，也可以删除.html文件。但是如果您这样做，您的html需要在
ts
文件中。除了
templateUrl
之外，您将拥有
template:
您的html内容，是的，是单独的文件，但我将立即提交表单。所以我只希望视图的所有部分都有一个组件。@DavidSagang您能找到问题的解决方案吗？我假设将表单拆分为三个组件需要将数据从子级传递到父级，您希望避免这种情况。事实上，我也面临同样的挑战。自编写此代码以来，表单或路由几乎没有变化（几乎没有变化）。唯一有点变化的是RxJS和Http。