Question

我已经花了好几个小时才完成这项任务，但它无法正常工作。

我尝试做的只是在菜单打开箭头图标时使用平滑旋转动画更改三明治图标，而在菜单关闭时使用相反方式。

这是示例中涉及的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（标题所在的位置）时，箭头图标与菜单图标一起显示，即使[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，其中包含了标题元素

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

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

1 个答案: