如何根据用户名授予对 HTML 元素的访问权限？

Question

我有一个按钮，如果他登录网站，我需要授予特定用户权限。我可以在 HTML 文件上使用 *ngIf 来执行此操作，但我想给 HTML 元素一个 id，然后对 .ts 文件执行权限操作。

<ul class="navbar-nav float-right" *ngIf="user.name === 'John'" >
  <li class="nav-item" >
    <a class="nav-link" routerLink="Private">Private</a>
  </li>
</ul>

提前致谢。

Answer 1

您可以在 html 文件中使用模板引用语法。并在您的组件代码中使用 ViewChild。

<ul class="navbar-nav float-right" #privateUL>
  <li class="nav-item" >
    <a class="nav-link" routerLink="Private">Private</a>
  </li>
</ul>

--

  @ViewChild("privateUL", { static: false }) ul: ElementRef;

  ngAfterViewInit() {
    // modify your element
    this.ul.nativeElement.style.backgroundColor = "blue";
  }

检查此 stackblitz 示例。

Answer 2

HTML

 <ul class="navbar-nav float-right" id="ulPrivate">
      <li class="nav-item" >
        <a class="nav-link" routerLink="Private">Private</a>
      </li>
    </ul>

TS

const el: HTMLElement = document.getElementById('ulPrivate');
el.setAttribute("style", "color:red; border: 1px solid blue;");

显然根据适当的隐私条件将样式更改为 "display:none" 或 "display:block"：user.name === 'John'

参考文献：

Declaring an HTMLElement Typescript

Answer 3

如果你想给元素动态添加id，你可以这样做

<ul class="navbar-nav float-right"  [attr.id]="'test'">
  <li class="nav-item" >
    <a class="nav-link" routerLink="Private">Private</a>
  </li>
</ul>

但我会向您推荐使用 ngIf 而不是像这样使用 id

<ul class="navbar-nav float-right"  *ngIf="FunctionFromTs()">
 <li class="nav-item" >
   <a class="nav-link" routerLink="Private">Private</a>
 </li>
</ul>

FunctionFromTs() 将 return 可见性的布尔值状态

如何根据用户名授予对 HTML 元素的访问权限？

How to give access to HTML element based on user name?

html

angular

angular-elements