angular materia（五）组件介绍

Menu 菜单：

image.png

菜单事件包括触发者还有菜单组件

image.png

image.png

如果我们想在自定义的菜单里面组件包含组件的

image.png

触发者是图片所示的按钮 菜单组件就是下方的菜单组件

image.png

代码如下：
<div md-subheader class="header-container">
<div>
<h3>{{header}}</h3>
</div>
<div class="fill">
<button md-button type="button" (click)="newtask()">
<md-icon>add_circle_outline</md-icon>
<span>新任务</span>
</button>
</div>
<div>
<button md-icon-button [mdMenuTriggerFor]="menu">
<md-icon>keyboard_arrow_down</md-icon>
</button>
</div>
</div>
<md-menu #menu="mdMenu" >
<button md-menu-item (click)="onEditListName()">
<md-icon>mode_edit</md-icon>
<span>修改列表名称</span>
</button>
<button md-menu-item (click)="onMoveContentAllClick()">
<md-icon [svgIcon]="'move'" class="material-icon" >mode_edit</md-icon>
<span>移动本列表所有内容</span>
</button>
<button md-menu-item (click)="onDeleteClick()">
<md-icon>delete_forever</md-icon>
<span>删除列表</span>
</button>
</md-menu>