Ionic - 从另一个页面或组件更新组件的变量 [英] Ionic - Update a component's variable from another page or component

问题描述

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

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

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

所以我的组件 menu 有一个名为 opened 的变量，这个变量决定了我的菜单元素的类

Menu.ts

@Component({选择器:'菜单'，templateUrl: 'menu.html',})导出类菜单组件 {打开:布尔=真；构造函数(){}切换菜单(){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()，该页面也有一个按钮，并且此按钮应更改值打开变量

<小时>

我尝试了什么

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

Menu.module.ts

@NgModule({声明:[菜单组件，],})导出类 MenuComponentModule {构造函数(公共菜单组件:菜单组件){}切换菜单(){this.menuComponent.toggleMenu()}}

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

解决方案

我推荐使用Events模块.

此模块生成的事件会在整个应用程序中全局传播.

你可以像下面这样使用它.

在 Homepage.ts

import { Events } from 'ionic-angular';//跳过包装组件构造函数(公共事件:事件){}onMenuClicked(){this.events.publish('toggleMenu')}

在Menu.ts

中

import { Events } from 'ionic-angular';//跳过包装组件构造函数(公共事件:事件){events.subscribe('toggleMenu', () => {this.opened = !this.opened});}

I'm trying to create a custom menu in Ionic3, when the user clicks in that hamburguer icon, it needs to add to the element #menuan open class, I'm trying to do this with ngClass

The problem is that this icon, is outside of my menu component, this icon is in my page home-user

When opened, my menu looks like this next image, so I can't use the default menu from ionic

So I have my component menu that has an variable named opened, and this variable decides the class of my menu element

Menu.ts

@Component({
    selector: 'menu',
    templateUrl: 'menu.html',
})

export class MenuComponent {

    opened: boolean = true;

    constructor() {
    }

    toggleMenu() {
        this.opened = !this.opened;
    }
}

So when I trigger toggleMenu() I change opened value

I trigger this function in my component page and works correctly

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?

How can I call this toggleMenu() from, for example, my home-user.html page, that also has an button and this button should change the value of opened variable

---

What have I tried

I tried to create a function in my menu.module.ts that trigger the toggleMenu() function in menu.ts

Menu.module.ts

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

    constructor(public menuComponent: MenuComponent) {

    }

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

But consoling the values, I notice that the value of opened is different when calling from component and when calling from my page

解决方案

I recommend to use Events module in ionic.

An event generated by this module propagates globally over whole app.

you can use it like the below.

In Homepage.ts

import { Events } from 'ionic-angular';
//skip wrapping component
constructor(public events: Events) {}

onMenuClicked(){
  this.events.publish('toggleMenu')
}

In Menu.ts

import { Events } from 'ionic-angular';
//skip wrapping component
constructor(public events: Events) {
  events.subscribe('toggleMenu', () => {
    this.opened = !this.opened
  });
}

这篇关于Ionic - 从另一个页面或组件更新组件的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！