Angular隐藏div动态取消隐藏最佳实践

Question

我正在使用登录页面构建Angular应用程序。登录页面包含以下元素：

• 登录表格
• 忘记密码
• 密码忘记确认消息
• 密码重置表单（点击通过电子邮件发送的链接后到此处结束）
• 加载微调器

首先，应显示login form。当您单击forgot my password链接时，登录表单将消失，并且应显示password forgot form，用户可以在其中输入其电子邮件地址并按下按钮以请求新密码。接下来，向用户显示password forgot acknowledge message，其中包含说明接下来会发生什么的文本。

当用户点击通过电子邮件发送的链接时，他会再次被重定向到登录页面并显示password reset form，在那里他可以输入所需的密码。

我目前所做的是在login.component.html page中连续写入所有div。默认情况下，除login form使用(example) *ngIf="forgotpassword" [@fadeInOutRight]外，所有内容均已隐藏。然后，基于点击页面上的按钮或链接，使用角度动画动态地进出屏幕。

我想知道这是不是很好的做法，还是应该使用其他任何技术来动态更改页面内容。

非常感谢任何提示。

谢谢！

Answer 1

您应该将路由用于您描述的目的。看看https://angular.io/guide/router

至少我会如何做到这一点。它有许多优点：

• 明确地将代码分离为具有一个目的的内聚组件
• 用户，您现在可以直接访问路线
• 你不必编写隐藏/切换逻辑，因为Angluar已经提供了
• 清晰的分离使测试更容易

Answer 2

首先ngIf可以做到这一点，你也可以考虑使用[hidden]属性。不同之处在于ngIf，您可以在DOM中创建和删除元素，而使用[hidden]属性则可以隐藏它们。但只要您的用户不会将垃圾邮件从一种表单切换到另一种表单，我认为使用ngIf就可以了。

我建议您在组件中拆分登录页面。例如，一个用于登录表单本身，另一个用于密码忘记表单等... 这样，当用户单击忘记密码按钮时，您只需将她/他指向相应的组件。

希望有所帮助