2017-10-12 3 views
2

J'ai récemment commencé à utiliser des matériaux angulaires et j'ai des difficultés à ouvrir/fermer un menu mat ... Je vois dans les exemples sur le site de documentation sur les matériaux angulaires qu'ils Attribuez un ID au menu, puis appliquez une directive au bouton utilisé pour basculer le menu. par exemple. [matMenuTriggerFor]="menu"Comment ouvrir/fermer un menu de matériau angulaire

Comment puis-je écrire une directive qui fait cela? Je ne sais pas comment passer une référence à un menu spécifique à une directive qui appelle ensuite la méthode toggle() sur l'élément DOM avec cet ID?

Le code suivant produit les erreurs:

Impossible de lier à « matMenuTriggerFor » puisqu'il n'est pas une propriété connue du « bouton ».

Il n'y a pas de directive avec "exportAs" défini sur "matMenu".
Mon code:

<li> 
    <button mat-icon-button [matMenuTriggerFor]="stockSystemMenu"> 
     <mat-icon class="sn-item"> 
      <i class="material-icons">archive</i> 
     </mat-icon> 
    </button> 
    <span class="sn-item" (click)="toggleMenu(stockSystemMenu)">Stok System</span> 

    <mat-menu #stockSystemMenu="matMenu"> 
     <button mat-menu-item> 
      <mat-icon> 
       <i class="material-icons">chevron_right</i> 
      </mat-icon> 
     <span>Service 1</span> 
     </button> 
    </mat-menu> 
</li> 
+0

votre code? qu'est ce que tu as essayé? – Aravind

+0

@Aravind je ne sais pas du tout comment commencer. Je dois en quelque sorte passer une référence de l'ID d'un élément dom à cette directive qui devrait alors appeler la fonction toggle() de cet élément dom? – user2094257

+0

si vous pouvez élaborer je vais vous aider à résoudre ce problème! – Aravind

Répondre

3

"Votre code est correct, vous n'avez pas besoin d'écrire la directive matMenuTriggerFor, il fait partie de l'API, assurez-vous d'avoir importé le MatMenuModule, MatButtonModule et MatIconModule dans votre module d'application." - from comments

6

Il y a confusion parce que le matériel a introduit un changement de rupture si je comprends bien .. Voir material 2 Changelog - Breaking Changes

A partir de matériaux 2.0.0-beta.12. Utilisez mat au lieu de md-* .. Semble seulement certains des documents à material.angular.io sont mis à jour avec mat. Plus précisément, si vous cliquez sur afficher la source et voir md, je crois qu'ils doivent encore le remplacer par mat. Donc, soit mettre à jour le matériel 2.0.0-beta.12 et utiliser mat-*, soit utiliser md-*.