我正在尝试在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>
那么,我的问题是什么?
如何从我的toggleMenu()
页面调用此home-user.html
,该页面还有一个按钮,此按钮应更改opened
变量的值
我尝试了什么
我尝试在menu.module.ts
中创建一个触发toggleMenu()
menu.ts
功能的功能
Menu.module.ts
@NgModule({
declarations: [
MenuComponent,
],
})
export class MenuComponentModule {
constructor(public menuComponent: MenuComponent) {
}
toggleMenu() {
this.menuComponent.toggleMenu()
}
}
但是安慰这些值,我注意到从组件调用和从我的页面调用时opened
的值是不同的
答案 0 :(得分:3)
我建议在离子中使用Events
模块。
此模块生成的事件在整个应用程序上全局传播。
你可以像下面这样使用它。
在 Homepage.ts
中import { Events } from 'ionic-angular';
//skip wrapping component
constructor(public events: Events) {}
onMenuClicked(){
this.events.publish('toggleMenu')
}
在 Menu.ts
中import { Events } from 'ionic-angular';
//skip wrapping component
constructor(public events: Events) {
events.subscribe('toggleMenu', () => {
this.opened = !this.opened
});
}