添加到<ion-router-outlet>我的页面时，所有按钮都停止工作

Question

我决定在页面中放置一个侧菜单，根据文档，我应该在该页面中插入<ion-router-outlet>标记，否则菜单将不会激活。问题是，当我插入这个标签时，我所有的按钮都不工作了。单击功能和按钮单击动画都不起作用。

我最初使用<ion-menu-button标签来切换菜单，所以我尝试通过函数menuController.toggle()进行切换，但这不起作用，即使如此，我也需要<ion-router-outlet>来激活菜单。

没有标签，我收到一个错误：

菜单：必须有一个"内容"元素才能侦听上的拖动事件。

我的代码：

<ion-content>
<ion-menu side="end">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngIf="userAccess == 'all'" href="randomHrefLink" target="_blank">
randomMenuItem
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-list>  
<ion-item *ngIf="userAccess == 'all' || userAccess == 'randomItem'">
<ion-thumbnail slot="start">
<img src="assets/thumbs/randomThumbnail.jpg">
</ion-thumbnail>
<ion-label>
<h2>randomItem</h2>
<p>randomDate</p>
</ion-label>        
<ion-button clear slot="end" (click)="randomFunction();">buttonWithProblem</ion-button>
</ion-item>
...
<ion-router-outlet main></ion-router-outlet>
</ion-list>
</ion-content>

---

附加信息：

• 还有一个页面包含<ion-router-outlet main>和其他菜单，我试图删除它们，但一切都保持不变。在这个在我试图复制问题的同一页面上，我添加了一个按钮一些随机函数，看看这个问题是否在一页中单独或全部。遗憾的是，同样的错误也发生在那个页面上也
• 有些点击功能在菜单内部起作用，只有外部按钮不起作用
• 尝试将menuId属性添加到<ion-menu>标记，但也没有任何更改
• 尝试在标签中实现(click)函数，但没有成功
• 基于这个答案，我尝试在<ion-menu>标签中添加一个contentId属性，并将其引用到<ion-router-outlet>，没有任何更改
• 有了这个另一个答案，我可以看到以前的错误原因，但无法确定按钮/功能不起作用的原因
• 在一个相关的SO回答中尝试了这个建议，但也看不出有什么不同
• 我创建了一个stackblitz来更容易地重现这个问题，但令我沮丧的是，它在那里运行得很好。(菜单图标没有显示在右上角，但它正在工作。我在网上有一个ionic 4模板，所以忽略其他页面(。所以我看到这个问题只发生在我的项目中，如果有人有想法，为什么请评论
• 我试图在其他项目中重现这个问题，同样是Ionic版本，但问题也发生在那里
• 在Android和浏览器中测试

---

系统信息：

• Ionic CLI:5.4.4

• NodeJS:v10.16.3

Answer 1

我无法解决这个问题，但我使用Ionic的Action Sheet实现了同样的目标。

例如：

async function presentActionSheet() {
const actionSheet = document.createElement('ion-action-sheet');
actionSheet.header = "Albums";
actionSheet.buttons = [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}];
document.body.appendChild(actionSheet);
return actionSheet.present();
}