ngClass в ionic 3 не работает правильно

Question

Я часами пытался это сделать, но это не работает.

Я пытаюсь просто изменить значок сэндвича с помощью плавной анимации поворота, когда меню открывается в виде стрелки.и наоборот, когда меню закрывается.

Вот три компонента, задействованных в примере.

header.ts

import { Component } from '@angular/core';
import { Events } from 'ionic-angular';
import { trigger, state, style, animate, transition } from '@angular/animations';

import { HomePage } from '../../pages/home/home';

@Component({
    selector: 'th-header',
    templateUrl: 'header.html',
    animations: [
        trigger('rotateToLeft', [
            state('closed', style({
                transform: 'rotate(0deg)'
            })),
            state('opened', style({
                transform: 'rotate(180deg)'
            })),
            transition('opened <=> closed', animate('200ms ease'))
        ]),
        trigger('rotateToRight', [
            state('opened', style({
                transform: 'rotate(0deg)'
            })),
            state('closed', style({
                transform: 'rotate(-180deg)'
            })),
            transition('closed <=> opened', animate('200ms ease'))
        ])
    ]
})
export class Header {
    isOpen: boolean = false;
    menuState: string = 'closed';

    constructor(public events: Events) {
        this.events.subscribe('menu:opened', () => {
            this.isOpen = false;
            this.menuState = 'opened';
        });
        this.events.subscribe('menu:closed', () => {
            this.isOpen = true;
            this.menuState = 'closed';
        });
    }

    goToHomePage() {
        this.events.publish('root_page_changed', HomePage)
    }
}

header.html

<ion-header>
    <ion-navbar >
        <ion-buttons text-center [ngClass]="{'sandwich': !isOpen, 'arrow': isOpen}">
            <button ion-button menuToggle>
                <ion-icon name="menu" [ngClass]="{'hide': isOpen}" [@rotateToLeft]="menuState"></ion-icon>
                <ion-icon name="arrow-round-back" [ngClass]="{'hide': !isOpen}" [@rotateToRight]="menuState"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title text-center>
            <img class="max-width" src="assets/imgs/header-logo.png" (click)="goToHomePage()">
        </ion-title>        
    </ion-navbar>
</ion-header>

Я попробовал все, но когда я попадаю на HomePage (где находится заголовок), значок стрелки отображается вместе со значком меню, даже если [ngClass] выполнен правильно, а переменная объявлена ​​с правымзначение.Вы также можете увидеть подписку на события меню, я отладил код, и он на этом останавливается, а значения переменных меняются, но ngClass никогда не применяет классы к элементам.

Вот меню.ts, где я публикую события для открытия и закрытия меню.

import { Component, Input } from '@angular/core';
import { Events } from 'ionic-angular';

import { CreatePage } from '../../pages/create/create';
import { SearchPage } from '../../pages/search/search';
import { TraysPage } from '../../pages/trays/trays';

export interface PageInterface {
    name: string;
    component: any;
    title: string;
    iconName: string;
}

@Component({
    selector: 'th-menu',
    templateUrl: 'menu.html'
})
export class Menu {
    @Input()
    navContent: any;

    constructor(
        public events: Events
    ) {}

    pages: PageInterface[] = [
        { name: 'create-page', component: CreatePage, title: 'Crear Documentos', iconName: 'new-icon' },
        { name: 'search-page', component: SearchPage, title: 'Buscar Documentos', iconName: 'search-icon' },
        { name: 'trays-page', component: TraysPage, title: 'Bandejas', iconName: 'trays-icon' }
        // { title: 'Create', component: CreatePage }
    ];

    pageSelected(page) {
        this.events.publish('root_page_changed', page.component);
    }

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

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

вот menu.html

<ion-menu [content]="navContent" enabled="false" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">
    <ion-content>
        <ion-list inset>
            <button menuToggle ion-item *ngFor="let page of pages" (click)="pageSelected(page)">
                <img src="assets/imgs/icons/{{page.iconName}}.png">
                <span>{{ page.title }}</span>
            </button>
            <button menuToggle ion-item>
                    <img src="assets/imgs/icons/logout-icon.png">
                    <span>Cerrar Sesión</span>
                </button>
        </ion-list>
    </ion-content>
</ion-menu>

А вот home.html, куда я включаю элемент заголовка

<th-header></th-header>

<ion-content padding class="th-bg-content">
    <div class="home-content">
        <div class="box-container vertical-center">
            <div class="img-container">
                <img class="max-width" src="assets/imgs/logo-blue.png">
            </div>
            <div class="text-container" text-center>
                <h3>Líder en soluciones para la gestión digital.</h3>
            </div>
            <div class="link-container" text-center>
                <a href="http://vivatia.com">www.vivatia.com</a>
            </div>
        </div>
    </div>
</ion-content>

Есть идеи, почему это не работает ??

Спасибо.

Answer 1

попробуйте следующую реализацию

[ngClass]=" isOpen ? 'sandwich': 'arrow'"

немного более понятно, также, если она не работает, я рекомендую вам напечатать значение на экране, чтобы увидеть, какое значение является переменнойпринимая как:

{{isOpen}}

РЕДАКТИРОВАТЬ:

Также вы могли бы немного упростить синтаксис, чтобы избежать возникновения таких проблем, как вы могли бы использовать тот жесобытие и отправить параметр.Мне лично не нравится злоупотреблять ионными событиями.Вы можете использовать @Output и @Input для обновления isOpen, или если меню является дочерним для заголовка, тогда вы можете использовать @ViewChild().

Пример:

menuOpened() {
    this.events.publish('menu:toggle', {status: true});
}

menuClosed() {
    this.events.publish('menu:toggle', {status: false});
}

и подписаться:

this.events.subscribe('menu:toggle', (status) => {
        this.isOpen = status;
    });