离子3:为什么事件需要这么长时间才能做出反应？

Question

我正在使用Ionic 3，并发布了两个事件，监听菜单的打开/关闭。我试图切换“菜单”图标为“关闭”图标。一切都在工作，然而图标的改变发生得非常缓慢。

app.html

<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">
    <ion-content>
        ...

app.component.ts

menuOpened() {
    this.events.publish('menu:opened', '');
}

menuClosed() {
    this.events.publish('menu:closed', '');
}

在我的主页上，我订阅了这样的活动：

home.ts

visible: boolean = false;

constructor(public events: Events) {
    events.subscribe('menu:opened', () => {
        this.toggleNavButtonIcon();
    });

    events.subscribe('menu:closed', () => {
        this.toggleNavButtonIcon();
    });

    ...
}

...

private toggleNavButtonIcon(): boolean {
    console.log('toggleNavButtonIcon called');
    return this.visible = !this.visible;
}

home.html

<button ion-button menuToggle>
  <ion-icon [name]="visible ? 'close' : 'menu'"></ion-icon>
</button>

当我单击菜单按钮时，事件立即被触发。我还可以立即在控制台中看到日志记录。但实际图标不会在2-3秒内发生变化。

有什么事情我可以做不同的事情，使图标切换即时事件是发布的？

谢谢您的建议！

Answer 1

你可以试试这个：

import { ChangeDetectorRef } from '@angular/core';

// Inject ChangeDetectorRef in your constructor.
public changeDetector: ChangeDetectorRef

private toggleNavButtonIcon(): boolean {
    console.log('toggleNavButtonIcon called');

    this.visible = !this.visible;
    this.changeDetector.detectChanges(); // <==========
    return this.visible;
}

在文档中，“检查变更检测器及其子代”。