Question

在Angular材料MatMenu文档https://material.angular.io/components/menu/api中，API有一个＆＃34;项目＆＃34;属性，它被记录为类似于MatList类组件的QueryList类型的属性。

在QueryList的Angular文档https://angular.io/api/core/QueryList中，实例显示了@ContentChildren（Item）项：QueryList返回类型＆＃34; Item＆＃34;的QueryList。＆＃34;容器内的组件＆＃34;模板。并且，当我检查MatMenu指令https://github.com/angular/material2/blob/master/src/lib/menu/menu-directive.ts的代码时。他们还获得了MatMenu组件中所有mat-menu-item的列表。

我有几个问题：

如何使用＆＃34;项目＆＃34;属性？
我们可以使用此属性动态设置mat-menu-items吗？

Answer 1

不确定我是否理解您的问题，可能不是，但这就是我的HTML代码中的内容：

<mat-menu #appMenu="matMenu">
    <button mat-menu-item *ngIf="(loggedIn)" [routerLink]="['./login']">Login</button>
    <button mat-menu-item *ngIf="(loggedIn)" [routerLink]="['./register']">Register</button>
    <button mat-menu-item *ngIf="(loggedIn)" [routerLink]="['./logout']"> Logout </button>
    <button mat-menu-item *ngIf="(loggedIn)" [routerLink]="['./profile']"> Profile </button>
    <button mat-menu-item *ngIf="(loggedIn)" [routerLink]="['./main']"> Main </button>
</mat-menu>

item只是css，因此您可以使用它来创建菜单项。它与项目的内容无关。

Answer 2

您只能在items类型的实例上访问菜单的MatMenu属性。为了获得菜单的引用，您可以在@ViewChild文件中为其添加.ts属性。

HTML：

<mat-menu #appMenu="matMenu">
    <button mat-menu-item> Settings </button>
    <button mat-menu-item> Help </button>
</mat-menu>
<div>
    <div *ngFor="let item of appMenu.items">
        {{item.getLabel()}}
    </div>
</div>

TS：

export class MyComponent implements OnInit {
    @ViewChild('appMenu') appMenu: MatMenu;
    ngOnInit(): void {
        console.log(this.appMenu.items);
    }
}

因为QueryList实现了一个可迭代的接口，所以它可以在ES6 javascript for (var i of items)循环中使用，也可以在*ngFor="let i of menu.items"的Angular模板中使用。 The documentation说明了QueryList

的以下内容

当应用程序状态发生变化时，Angular保持最新的不可修改的项目列表。

这让我相信你不应该动态地改变这个列表的内容。

＆＃34; item＆＃34;有什么用？在MatMenu属性angular / material2？

2 个答案: