我已经在应用中实现了文档(doc)中的CDK菜单。
我是这么做的
1.安装CDK:npm i @angular/cdk
1.在app.module.ts
中导入菜单cdk并在“imports”部分使用它:import { CdkMenuModule } from '@angular/cdk/menu'
imports: [BrowserModule, CdkMenuModule]
1.在我的app.component.html
中创建菜单
<button [cdkMenuTriggerFor]="menu" class="example-standalone-trigger">Click me!</button>
<ng-template #menu>
<div class="example-menu" cdkMenu>
<button class="example-menu-item" cdkMenuItem>Refresh</button>
<button class="example-menu-item" cdkMenuItem>Settings</button>
<button class="example-menu-item" cdkMenuItem>Help</button>
<button class="example-menu-item" cdkMenuItem>Sign out</button>
</div>
</ng-template>
<hello-world></hello-world>
问题是,当我点击按钮时,菜单在页面底部打开,而不是就在按钮下面。
下面是一个Stackblitz,它显示了这个问题:https://stackblitz.com/edit/f1y9wh
我已经从文档中遵循了这个例子(他们的stackblitz工作正常):独立触发菜单
1条答案
按热度按时间icnyk63a1#
好了,如果有人遇到这个问题,你必须在你的
styles.scss
中导入:它来自CDK Overlay:https://material.angular.io/cdk/overlay/overview
但是在CDK菜单文档中从来没有写过你必须导入这个CSS。