Ionic - 从另一个页面或组件

时间:2018-06-18 14:21:51

标签: ionic3 components

我正在尝试在Ionic3中创建自定义菜单,当用户点击该hamburguer图标时,它需要添加到元素#menuopen类,我正在尝试做这与ngClass

问题是此图标位于我的菜单组件之外,此图标位于我的页面home-user

enter image description here

打开时,我的菜单看起来像下一张图片,因此我无法使用离子

中的默认菜单

enter image description here

所以我的组件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的值是不同的

1 个答案:

答案 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
  });
}