如何在Angular 6应用程序的索引页面中隐藏/显示按钮？
我是Angular 6的新手。我在一个后端管理面板上工作，需要用户首先登录才能访问应用程序功能。
一切都很好，但我被一件事卡住了。我已经把我的
注销
按钮在Angular 6应用程序的首页上。
问题是login page上也显示Logout button。我要把那个按钮藏起来。
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元素，这取决于您在每个后续组件中的选择？
回答 2
Stack Overflow用户
发布于 2018-08-10 07:02:10
是的，这个*ngIf是不会工作的，因为它被放在了角度引导进程之外。
你应该把动态的项目放在Angular里面
为了避免在应用程序的某些路径上输入用户并强制他们登录，您应该使用route guards。
如果你不想仅仅为了登录而加载你的入口应用程序(因为它可能是一个繁重的应用程序)，你应该考虑使用Asynchronous Loading。也就是说，只使用您的用户有权查看的模块的guards to lazy load。
对于你正在寻找的东西，可能有多种解决方案。但我建议的方法将更易于维护和调试。
但是如果你仍然想按你自己的方式去做，你可以使用document.getElementsByClassName()或element.getElementsByTagName()直接从Angular修改DOM，并改变它的属性，你可以选择从style.display = 'none'到setAttribute('hidden', 'true')。你有选择。
它设置了一个working StackBlitz here。
Stack Overflow用户
发布于 2018-08-10 07:05:48
通常，处理这种行为的最好方法是让应用程序拥有一个共享的AuthenticationService，它保持用户的登录状态，并将该服务注入到所有需要它的组件和守卫中。
服务在Angular中是单例的，因此所有组件都将获得相同的实例。
有关示例，请参阅http://jasonwatmore.com/post/2018/05/16/angular-6-user-registration-and-login-example-tutorial，它还包含一些保护，用于在未经身份验证时阻止访问经过身份验证的路由。
https://stackoverflow.com/questions/51776411
复制相似问题