Ionic 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;
}

来自documentation，“检查变更检测器及其子项”。