angular / angular/components

feat(Menu): Programmatically open/close menu

Aperta
#31,993 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: material/menu feature P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### Feature Description

**feat(Menu): Programmatically open/close menu**

When the menu is clicked, it opens right away.

I want to handle the click event and programmatically open the menu after doing another operation.

My workaround at present:

```html
List Data

@for (item of data; track item)
{
{{ item.text }}
}

```

```typescript
@ViewChild('dataMenuBtn', { read: ViewContainerRef })
private readonly dataMenuBtnViewContainerRef!: ViewContainerRef;

@ViewChild('dataMenuBtn', { read: ElementRef })
private readonly dataMenuBtnElementRef!: ElementRef;

private dataMenuTrigger!: MatMenuTrigger;
protected data: { text: string }[] = [];

protected async listData(dataMenu: MatMenu, $event: MouseEvent): Promise
{
const menuTrigger = this.dataMenuTrigger ?? (this.dataMenuTrigger = runInInjectionContext(Injector.create({
providers: [
{
provide: ElementRef,
useValue: this.dataMenuBtnElementRef
},
{
provide: ViewContainerRef,
useValue: this.dataMenuBtnViewContainerRef
}
],
parent: this.injector // `Injector` via DI.
}), () => new MatMenuTrigger()));
menuTrigger.menu = dataMenu;
const result = await fetch(`/api/...`);
this.data = await result.json() as typeof this.data;
menuTrigger.openMenu();
}
```

### Use Case

Load data inside menu on click

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia leggendo gli entry point MatMenu e MatMenuTrigger di Angular Material, in particolare il comportamento esistente di openMenu() e il modo in cui il trigger viene associato a un menu. Determina come un trigger supportato possa aprire o chiudere il menu dopo un’operazione asincrona, invece di fare affidamento sulla costruzione manuale mostrata. Il lavoro è completato quando i chiamanti possono caricare i dati al clic e poi aprire o chiudere il menu programmaticamente tramite l’API pubblica.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.