离子3：为什么事件需要这么长时间来回应？

Posted 2021-04-17

我正在使用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秒。

有什么我可以采取不同的方式使图标切换在事件发布时瞬间完成吗？

谢谢你的任何建议！

答案

你可以试试这个：

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，“检查变化探测器及其子”。