什么时候应该使用* ngIf而不是隐藏属性，反之亦然？

4 回答

• 0

  我在Angular文档中为您的问题找到了一些更好的答案 . 希望它能为您提供明确的方法，以便从 *ngIf 和 hidden 中找到更好的选择 .

  来自Angular指南

  隐藏和删除之间的区别对于简单的段落无关紧要 . 将主机元素附加到资源密集型组件时，这很重要 . 即使隐藏，这样的组件的行为也会继续 . 该组件保持与其DOM元素的连接 . 它一直在听事件 . Angular会不断检查可能影响数据绑定的更改 . 无论组件在做什么，它都在继续 . 虽然不可见，但组件及其所有后代组件会占用资源 . 性能和内存负担可能很大，响应性会降低，用户什么都看不到 . 从积极的方面来说，再次显示元素很快 . 组件的先前状态将保留并准备显示 . 该组件不会重新初始化 - 可能很昂贵的操作 . 所以隐藏和展示有时是正确的事情 . 但是由于没有令人信服的理由来保留它们，您的偏好应该是删除用户无法看到的DOM元素，并使用结构指令（如NgIf）恢复未使用的资源 . 这些相同的考虑适用于每个结构指令，无论是内置指令还是自定义指令 . 在应用结构指令之前，您可能希望暂停一下，以考虑添加和删除元素以及创建和销毁组件的后果 .

  回复于 2024-04-26T15:07:03+08:00
• 0

  有两次我有理由选择其中一个：

  • 使用 [hidden] 时选择 *ngIf 会导致性能问题（DOM中仍有数百个隐藏标签，可能会导致网站呈现缓慢） .

  • 当您仍然需要初始化隐藏组件并将事件传递给它时，选择 [hidden] ，即使您不打算显示它也是如此 .

  除了这两个规则之外，还有一个问题是你的设置是否合适 .

  我举一个例子，说明我在现实生活中找到的每一个：

  使用[隐藏]时选择* ngIf会导致性能问题

  想象一下，您有一个 Ticket 对象，并通过使用 Log 对象列表跟踪对每个故障单的修改 . 每个日志代表一种需要以不同方式呈现的更改（例如：关闭票证会生成显示旧状态和新状态的日志，但是向故障单添加文件会显示文件的预览） .

  一种可能的实现是使用 [hidden] ，如下所示：

  <span [hidden]="logType !== 1">...</span>
  <span [hidden]="logType !== 2">...</span>
  <span [hidden]="logType !== 3">...</span>
  ...
  <span [hidden]="logType !== 30">...</span>
  

  然后，对于页面中的每个日志，您将拥有29个隐藏的DOM元素 . 现在，如果您的票证被修改了很多，比如10次修改，您最终会在DOM中使用290个隐藏元素，这些元素将使用内存并且渲染速度较慢 .

  在这种情况下，将 [hidden] 更改为 *ngIf 会完全删除290个额外对象 .

  当您仍需要初始化隐藏组件时，选择[隐藏]

  检查其他情况：

  Ticket.html

  <ng-container *ngIf="numLogs > 0">
      <h1>Logs</h1>
      <ticket-logs [ticketId]="ticket.id"
                   (onNumLogsRetrieved)="setNumLogs($event)"></ticket-logs>
  </ng-container>
  

  setNumLogs($event) 是设置 numLogs 值的那个 .

  请注意，对于 *ngIf ， ticket-logs 组件永远不会被实例化，因此 numLogs 将始终为 0 . 在这种情况下，您需要使用 [hidden] ，这使 ticket-logs 组件有机会调用 setNumLogs 来隐藏 h1 及其自身 .

  （注意，在这种情况下，我们不能让 ticket-logs 隐藏自己的内容，因为我们仍然会显示 h1 标记 . ）

  回复于 2024-04-26T15:07:03+08:00
• 6

  如果希望根据条件动态插入DOM元素，则使用 ngIf . 使用hidden属性，您将始终拥有DOM元素现在，您可以随时从DOM获取它，但它（显然）不会对用户可见 .

  因此，当您不希望元素完全出现在DOM中时，请使用* ngIf . 当您想要存储一些数据时（使用可见的表单元素进行发布）并且由于某种原因需要访问它时，请使用隐藏元素，使其对用户隐藏 .

  回复于 2024-04-26T15:07:03+08:00
• 3

  ngIf 是Angular提供的指令 . 它用于在角度应用程序中添加或删除html内容 . 如果我们提供false，它将删除内容 .

  例如

  <div *ngIf="isValid"> Data is valid. </div>
  

  hidden 可以是用户只是隐藏页面中的内容 . 它不会删除DOM元素 . 但它只是隐藏

  例如

  <div hidden> Data is valid. </div>
  

  我们什么时候应该使用* ngIf？

  当某个表单中的某些字段应该为特定用户删除时，可以使用它 . 然后你可以使用* ngIf . 因为任何人都可以通过从dom中删除隐藏来使DOM元素可见 . 因此，如果任何人在特定条件下不应使用某个字段，则最好使用* ngIf

  回复于 2024-04-26T15:07:03+08:00