вставлять пункты меню используя ng-контент - PullRequest
3 голосов
/ 07 января 2020

У меня есть компонент, который принимает динамический c контент. Один из которых должен быть предметом в <mat-menu>. Это работает, но мой «внешний» mat-menu-items не имеет такой же parentMenu (он не определен), как мой «внутренний» mat-menu-items после завершения рендеринга. Это приводит к тому, что подменю рендеринга не работают должным образом.

widget.component.ts

@Component({
  selector: 'app-widget',
  templateUrl: './widget.component.html',
  styleUrls: ['./widget.component.scss']
})
export class WidgetComponent implements AfterViewInit {
  // The matMenu all the items should be connected to
  @ViewChild('actionsMenu', {static: false}) actionsMenu: MatMenu;

  // The matMenuItem's inserted into this component externally
  @ContentChildren(MatMenuItem) menuItems: QueryList<MatMenuItem>;

  constructor() { }

  ngAfterViewInit() {
    // By listing out these, I find that none of them have `_parentMenu` set.
    console.log(this.menuItems);
  }
}

widget.component. html

<!-- The menu trigger -->
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
  <mat-icon>more_vert</mat-icon>
</button>

<!-- The menu -->
<mat-menu #actionsMenu="matMenu">
  <button mat-menu-item type="button" (click)="doStuff()">
    Standard 1
  </button>
  <button mat-menu-item type="button" (click)="doSomethingElse()">
    Standard 2
  </button>

  <!-- Insert dynamic items -->
  <ng-content select="[app-widget-actions]"></ng-content>
</mat-menu>

app.component. html

<app-widget>

  <!-- Actions menu -->
  <ng-container app-widget-actions>
    <button mat-menu-item [matMenuTriggerFor]="custom">
      Custom task
    </button>
    <mat-menu #custom="matMenu">
      <button mat-menu-item type="button">Custom task 1</button>
      <button mat-menu-item type="button">Custom task 2</button>
    </mat-menu>
  </ng-container>

</app-widget>

Это сделает виджет и весь контент в порядке. Но пункт меню «Пользовательское задание», определенный в app.component.html, не будет отображаться как подменю (которое должно открываться в стороне при наведении курсора). Я ожидаю, что приведенное выше создаст следующую структуру меню:

- Menu
  |- Standard 1
  |- Standard 2
  |- Custom task
     |- Custom task 1
     |- Custom task 2

Вместо этого он выдаст:

- Menu
  |- Standard 1
  |- Standard 2
  |- Custom task

, где «Пользовательское задание» будет реагировать только на нажатие (например, * 1029). * без родительского меню).

Мой вопрос; Как я могу отобразить «Меню действий» как часть <mat-menu> внутри моего widgets.component?

Редактировать : из-за отсутствия ответа на этот вопрос я понимаю, что никто не имеет никаких советов, чтобы сделать эту работу из коробки. Поэтому я надеюсь, что команда angular сможет обеспечить функциональность, необходимую для этой работы. Итак, я создал запрос функции здесь: https://github.com/angular/components/issues/18123

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...