基于数据库配置的动态模板Angular

Question

我有一个Angular应用程序，在某些界面中，我需要根据从数据库中检索到的用户配置显示/隐藏一些div。

我正在考虑使用* ngIf并执行以下操作：

<div *ngIf=“hasConfig(‘blue’)>
      Blue div
</div>

<div *ngIf=“hasConfig(‘yellow’)>
      Yellow div
</div>

<div *ngIf=“hasConfig(‘red’)>
      Red div
</div>

但是我担心这会损害我的应用程序性能，并且会造成一些混乱，因为在我的应用程序的某些部分也会发生相同的情况。 而且这些div都有字段，每个字段都有一个可以发送到服务器的ngModel，就像它们所有的togheter构成一个单一表单一样。

主菜单也是如此，我需要根据管理员授予用户的权限显示菜单。今天，我正在使用* ngIf进行此操作，但是我不确定这是否是最好的方法。

在这种情况下，是否有任何好的做法或解决方案都不会减慢我的应用程序运行速度？

Answer 1

ngIf确实是根据用户权限显示/隐藏UI部分的最佳方法。

您还可以使用Router Guards保护路由（例如CanActivate）。

如果在每个组件中获取用户的权限，则确实可能会降低应用程序的速度，因此，我建议您在登录时一次获取它们-最有效的方法是在成功登录请求后返回权限。

您将要使用所有组件之间共享的服务来缓存此结果。

如果相反，您在登录后发送了单独的权限请求，这将使速度变慢。延迟是否明显取决于第二个请求完成所需的时间。