如何基于用户名授予对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');
element.setAttribute("style", "color:red; border: 1px solid blue;");

这样的东西对您有用吗？

参考：

Declaring an HTMLElement Typescript

How to set multiple CSS style properties in typescript for an element?