Question

我是Angular 6的新手。我正在一个后端管理面板上，该面板要求用户首先登录才能访问应用程序功能。

一切正常，但我陷入一件事。我把

注销

Angular 6应用程序索引页面上的

按钮。

问题是Logout button也显示在login page上。我需要隐藏该按钮。

Index.html

...
<body>
<div class="logo-top">
<img src="/app/Content/Images/logo.png" class="logo">
<button *ngIf="nav.isShowLogoutButton" id="logoutButton" type="button" class="btn  btn-default btn-sm float-md-right center-block" style=" margin-right: 40px;margin-top: 20px;">
  <span class="glyphicon glyphicon-log-out"></span> Log out
</button>

我已在登录页面和其他页面上使NavbarService隐藏/显示导航栏。但是我不能使用*ngIf="nav.isShowLogoutButton，因为我认为索引页面没有任何组件。

是否有任何方法可以根据您在每个后续组件中的选择来隐藏/显示索引页中的HTML元素？

Answer 1

是的，*ngIf不起作用，因为它位于Angular引导程序之外。

您应将动态项目放入Angular

为避免在应用程序的某些路由上进入用户并强迫他们登录，您应使用route guards。

如果您不想只是为了登录而加载Entyre应用程序（因为它可能是一个沉重的应用程序），则应考虑使用Asynchronous Loading。也就是说，guards to lazy load仅使用您的用户有权查看的模块。

针对您要寻找的内容可能有多种解决方案。但是我建议的方法将更易于维护和调试。

但是，如果您仍然希望按照自己的方式进行操作，则可以选择使用document.getElementsByClassName()或element.getElementsByTagName()从Angular直接更改DOM并更改其属性，然后可以从{{1}中进行选择}至style.display = 'none'。您可以选择。

它设置了一个working StackBlitz here。

Answer 2

通常，处理这种行为的最佳方法是使应用程序具有一个共享的AuthenticationService，它可以保持用户登录状态，并将该服务注入需要它的所有组件和防护中。

服务是Angular中的单例，因此所有组件都将获得相同的实例。

有关示例，请参见http://jasonwatmore.com/post/2018/05/16/angular-6-user-registration-and-login-example-tutorial，其中还包含防护措施，以防止未经身份验证时访问经过身份验证的路由。

如何在Angular 6应用程序的索引页面中隐藏/显示按钮？

2 个答案: