离子3中的ngClass无法正常工作

我已经花了好几个小时来完成这项工作，但它没有用 .

我想要做的只是当菜单打开箭头图标时使用平滑旋转动画更改三明治图标，而当菜单关闭时则相反 .

这里是示例中涉及的3个组件 .

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（ Headers 所在的位置）时，箭头图标与菜单图标一起显示，即使[ngClass]正确完成并且变量声明的值正确 . 您还可以看到对菜单事件的订阅，我调试了代码并且它确实停在那里并且变量的值确实发生了变化，但是ngClass从不将类应用于元素 .

这是menu.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，其中包含header元素

<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>

任何想法为什么它不工作？

谢谢 .