Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

162
Visualizações
Angular2 Obtener referencia a Material MdMenu creado en ngFor

Lo que estoy tratando de lograr

Estoy tratando de crear dinámicamente un menú en cascada de 2 niveles con componentes angulares y materiales.

  • El primer nivel se compone de una md-nav-list con un montón de
    md-list-items que contienen botones creados usando ngFor
  • El menú de segundo nivel es un md-menú con botones. El botón md-menu se genera utilizando un anidado
  • Ahora, me gustaría activar el menú de segundo nivel al pasar el mouse sobre un elemento de primer nivel.

     ... // Level 1 Menu <button class="cq-but" md-menu-item *ngIf="item.type === 'sub'" [mdMenuTriggerFor]= ... // <- how do I reference mdMenu here?? item.name </button> // Level 2 Menu <md-menu class="cq-popup" *ngIf="item.type === 'sub'" #subMenu="mdMenu" id=item.name> <button md-menu-item *ngFor="let childitem of item.children"> childitem.name </button> </md-menu> </md-list-item>

en que necesito ayuda

El menú md generado dinámicamente debe activarse mediante un [mdMenuTriggerFor] en los botones del primer nivel.

Como he señalado en el fragmento de código anterior, mi pregunta es... ¿cómo me vinculo al componente md-menu generado dinámicamente en mi directiva mdMenuTriggerFor?

** Lo que he intentado **: traté de obtener una referencia al submenú usando ViewChildren, es decir

 // @ViewChildren('subMenu') public subMenu:QueryList<MdMenu>;

con la esperanza de activar el menú mediante programación sin tener que proporcionar la directiva mdMenuTriggerFor en la plantilla. Sin embargo, eso no funciona porque, según https://material.angular.io/components/component/menu , la directiva mdMenuTriggerFor es necesaria para adjuntar el menú a un elemento desencadenante en el DOM.

Abierto a otros enfoques. ¡Gracias!

over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

Aquí hay una forma de hacerlo: puede usar <ng-container> y simplemente creará un ámbito privado para su variable de plantilla ( https://stackblitz.com/edit/repeating-menu-approach-2 ):

 <table class="table table-striped"> <ng-container *ngFor="let el of [1,2,3,4,5]"> <tr> <td>Text line of menu {{el}}</td> <td style="width: 5%"> <button mat-icon-button [matMenuTriggerFor]="menu"> <mat-icon>more_vert</md-icon> </button> <mat-menu #menu="matMenu"> <button mat-menu-item (click)="clickHandler('Item 1 of Menu ' + el)">Menu {{el}}:Item 1</button> <button mat-menu-item (click)="clickHandler('Item 2 of Menu ' + el)">Menu {{el}}:Item 2</button> </mat-menu> </td> </tr> </ng-container> </table>

Curiosamente, cada #menu de plantilla de #menú anterior será única, aislada con éxito de las otras variables de plantilla de #menú creadas por el bucle *ngFor #menu

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda