1
votes

Comment donner accès à un élément HTML en fonction du nom d'utilisateur?

J'ai un bouton dont j'ai besoin pour donner l'autorisation à un utilisateur spécifique s'il se connecte à un site Web. Je peux le faire avec * ngIf sur le fichier HTML mais je voudrais donner un identifiant à l'élément HTML, puis effectuer l'opération d'autorisation sur le fichier .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>

Merci d'avance.

angular html angular-elements

0 commentaires

3 Réponses :

0
votes

Vous pouvez utiliser la syntaxe de référence de modèle dans votre fichier html. Et utilisez ViewChild au code de votre composant.

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

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

- -

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

Consultez cet exemple de stackblitz .

0 commentaires

0
votes

HTML

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

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

Évidemment, changez le style en "display: none" ou "display: block" selon la condition de confidentialité appropriée: user.name === 'John'

Références:

Déclarer un typescript HTMLElement

Comment définir plusieurs propriétés de style CSS dans dactylographié pour un élément?

0 commentaires

0
votes

si vous souhaitez ajouter un identifiant à l'élément de manière dynamique, vous pouvez le faire de cette façon

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

Mais je vous recommanderai d'utiliser ngIf au lieu de id comme celui-ci

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

FunctionFromTs () qui retournera le statut booléen de visibilité

0 commentaires