Javascript 按角度将页面正确划分为组件

我的项目中有以下文件夹结构：

我有一个

列表页面

，有一些操作，例如通过模式对话框执行

创建

、

更新

和

删除

。在这个场景中，我认为应该为每个操作（CRUD）创建4个页面，并为它们创建一些组件。但在这个阶段，我真的很困惑，因为我总是在每个页面上使用组件。如何正确划分页面并命名每个页面及其组件？我是这样想的：

|-- home
     |-- components
         |-- list | .html & .ts
         |-- create-form | .html & .ts
         |-- update-form | .html & .ts
         |-- delete | .html & .ts

     |-- pages
         |-- list | .html & .ts

---

我认为没有必要为每个组件创建单独的页面，因为列表网格上有3个按钮，如添加、更新和删除，我可以将相应的组件呈现给列表页面上的模式对话框。我错了吗？或者我应该如何组织这些页面和组件？如果你能举例说明你的名字，那也太好了。

我认为你的做法是正确的，以下是我的想法

我认为没有必要为每个组件创建单独的页面

是的，不需要为每个操作创建单独的组件

我应该如何组织这些页面和组件

创建如下结构的组件（我指的是所有操作的单个组件）：

在这里，我们可以使用表单操作（名称可能更好）组件来处理多个用例，如使用创建、更新和删除

按照如下方式设计组件

编辑：

有关调用matDialog的更多信息，请尝试遵循此材料

我们可以使用

editMode

来区分对话框组件（在本例中为Hello组件）中的操作

p.S:您可以在app.component.html中删除此内容

<div *ngIf="editMode">
    <form-operations [editMode]="editMode"></form-operations>
</div>

非常感谢您的宝贵解释。为每个操作创建单独的组件，并将它们呈现到由列表上的按钮调用的模式对话框中，这是否是一个好主意？你能举一个关于这种情况的例子吗？另一方面，如果我想使用表单等可重用组件，我应该做哪些更改？或者我应该考虑什么？问候。@Jack更新了答案，请检查。很抱歉，我没有及时回复，但我刚找到要检查的地方。首先，非常感谢你的帮助和投票。那么，是否有一个使用可重用组件覆盖所有CRUD操作的详细示例？如果你建议一个你认可的合适的方法或例子，也可以。

const dialogRef = this.dialog.open(HelloComponent,{
  data: {
     editMode: this.editMode
  }
 });

 dialogRef.afterClosed().subscribe((confirmed: boolean) => {
  console.log("closed the dialog");
 });

<div *ngIf="editMode">
    <form-operations [editMode]="editMode"></form-operations>
</div>