我正在尝试在Ionic3中创建一个自定义菜单,当用户点击该hamburguer图标时,它需要添加到元素 #menu
一个 open
类,我正在尝试使用 ngClass
问题是这个图标在我的菜单组件之外,这个图标在我的页面 home-user
打开时,我的菜单看起来像下一张图片,所以我不能使用离子的默认菜单
所以我的组件 menu
有一个名为 opened
的变量,这个变量决定了我的菜单元素的类
Menu.ts
@Component({
selector: 'menu',
templateUrl: 'menu.html',
})
export class MenuComponent {
opened: boolean = true;
constructor() {
}
toggleMenu() {
this.opened = !this.opened;
}
}
所以当我触发 toggleMenu()
时,我改变 opened
值
我在组件页面中触发此功能并正常工作
Menu.html
<div id="menu" [ngClass]="opened ? 'open' : ''">
<a class="menu-item" href="#">Sair</a>
<ion-icon (click)="toggleMenu()" id="toggleMenu" name="close"></ion-icon>
</div>
So, whats my problem?
如何从 home-user.html
页面调用此 toggleMenu()
,该页面还有一个按钮,此按钮应更改 opened
变量的值
What have I tried
我试图在我的 menu.module.ts
中创建一个函数来触发 menu.ts
中的 toggleMenu()
函数
Menu.module.ts
@NgModule({
declarations: [
MenuComponent,
],
})
export class MenuComponentModule {
constructor(public menuComponent: MenuComponent) {
}
toggleMenu() {
this.menuComponent.toggleMenu()
}
}
但是安慰这些值,我注意到 opened
的值在从组件调用和从我的页面调用时是不同的
1 回答
我建议在离子中使用Events模块 .
此模块生成的事件在整个应用程序上全局传播 .
你可以像下面这样使用它 .
在 Homepage.ts
在 Menu.ts