Ionic - 从另一个页面或组件更新组件的变量答案

【问题标题】：Ionic - Update a component's variable from another page or componentIonic - 从另一个页面或组件更新组件的变量
【发布时间】：2018-06-18 14:21:51
【问题描述】：

我正在尝试在 Ionic3 中创建一个自定义菜单，当用户单击该汉堡包图标时，它需要添加到元素 #menuan open 类，我正在尝试使用 @987654327 来做到这一点@

问题是这个图标，在我的菜单组件之外，这个图标在我的页面home-user

打开后，我的菜单看起来像下一张图片，所以我不能使用 ionic 的默认菜单

所以我的组件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>

那么，我的问题是什么？

如何从我的home-user.html 页面调用这个toggleMenu()，它也有一个按钮，这个按钮应该改变opened 变量的值

我尝试了什么

我试图在我的menu.module.ts 中创建一个函数来触发menu.ts 中的toggleMenu() 函数

Menu.module.ts

@NgModule({
    declarations: [
        MenuComponent,
    ],
})
export class MenuComponentModule {

    constructor(public menuComponent: MenuComponent) {

    }

    toggleMenu() {
        this.menuComponent.toggleMenu()
    }
}

但是在安慰这些值时，我注意到opened 的值在从组件调用和从我的页面调用时是不同的

【问题讨论】：

您能描述一下您想要获得的用户体验吗？目前尚不清楚该菜单在哪里以及它解决了什么问题
@SergeyRudenko，对不起，我更新了我的问题

标签： ionic3 components

【解决方案1】：

我建议在 ionic 中使用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
  });
}

【讨论】：