在 Angular 中正确地将页面划分为组件

本文介绍了在 Angular 中正确地将页面划分为组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

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

我有一个 list-page 并且有一些操作，例如create、update 和 delete 通过模态对话框执行.在这个场景中，我认为我应该为每个操作 (CRUD) 和它们的一些组件创建 4 个页面.但是在这个阶段我真的很困惑，因为我总是为每个页面使用组件.如何正确划分页面并命名每个页面和其中的组件?我是这么想的:

|-- 主页|-- 组件|-- 列表 |.html &.ts|-- 创建表单 |.html &.ts|-- 更新表单 |.html &.ts|-- 删除 |.html &.ts|-- 页面|-- 列表 |.html &.ts

我认为没有必要为每个组件创建单独的页面，因为列表网格上有 3 个按钮，如添加、更新和删除，我可以将相应的组件呈现到位于列表页面上的模态对话框.我错了吗?或者我应该如何组织这些页面和组件?用名字举例也很好.

解决方案

我认为您的方法是正确的，以下是我的想法

<块引用>

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

是的，无需为每个操作创建单独的组件.

<块引用>

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

创建如下结构的组件(我的意思是所有操作的单个组件):

|-- 主页|-- 组件|-- 表单操作 |.html &.ts &.scss|-- 页面|-- 列表 |.html &.ts

在这里，我们可以通过使用@Input.

以这种方式设计组件 stackBlitz

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

我们可以使用 editMode 来区分对话框组件(在本例中为 Hello 组件)中的操作.

const dialogRef = this.dialog.open(HelloComponent,{数据: {编辑模式:this.editMode}});dialogRef.afterClosed().subscribe((confirmed: boolean) => {console.log(关闭对话框");});

P.S:您可以在 appponent.html 中删除它

<form-operations [editMode]="editMode"></form-operations>

I have the following folder structure in my project:

I have a list-page and there are some operations e.g. create, update and delete performed via a modal dialog. In this scene, I think I should create 4 pages for each of these operations (CRUD) and some components for them. But at this stage I am really confused as I have always used components for each page. How to divide the pages properly and name each page and components in it? I thought something like that:

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

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

I think there is no need to create a separate pages for each component, because there are 3 buttons like Add, Update and Delete on the List grid and I can render corresponding component to a modal dialog located on the list page. Am I wrong? Or how should I organize these pages and components? It would be also nice to give examples by names.

解决方案

I think you are going in right way and here are my thoughts

I think there is no need to create a separate pages for each component..

Yeah, no need to create separate component for each operation.

how should I organize these pages and components?

Create components like below structure (I mean single component for all the actions) :

|-- home
     |-- components
         |-- form-operations | .html & .ts & .scss

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

Here we can use the form-operations (name could be better one) components for multiple use cases like Create, Update and Delete by using @Input.

Design the Component something like the way in this stackBlitz

Edit :

Please try to follow this material stackBlitz for more info about calling matDialog.

We can use the editMode to differentiate between the actions in the dialog component (in this case Hello Component).

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

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

P.S: you can remove this in appponent.html

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

这篇关于在 Angular 中正确地将页面划分为组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！