ホストビンディングの式がチェックされた後に変更されました。前の値 'hidden'現在の値 'hidden'

Question

こんにちは私はanglesアニメーションapiを使用してホスト要素の高さをアニメーションしようとしています。ここに私のコードは次のとおりです。

import { animate, state, style, transition, trigger} from '@angular/core'; 

    export class SlideToggleOption { 
     public static AnimationName: string = 'slideToggle'; 
     public static Visible: string = 'visible'; 
     public static Hidden: string = 'hidden'; 
    } 

    export function SlideToggleAnimation() { 
     return trigger(SlideToggleOption.AnimationName, [ 
      state(SlideToggleOption.Visible, style({ height: 'auto', overflow: 'hidden' })), 
      state(SlideToggleOption.Hidden, style({ height: 0, overflow: 'hidden' })), 

      transition(`${SlideToggleOption.Visible} => ${SlideToggleOption.Hidden}`, animate('5000ms ease-in')), 
      transition(`${SlideToggleOption.Hidden } => ${SlideToggleOption.Visible}`, animate('5000ms ease-out')) 
     ]); 
    } 

import { Component, Input, OnInit, OnChanges, ElementRef, HostBinding } from '@angular/core'; 
import { SlideToggleAnimation, SlideToggleOption } from './../../animations/slide-toggle.animation'; 

@Component({ 
    selector: 'dropdown-menu', 
    moduleId: module.id, 
    styleUrls: ['dropdown-menu.style.css'], 
    templateUrl: 'dropdown-menu.view.html', 
    animations: [SlideToggleAnimation()] 
}) 
export class DropdownMenuComponent implements OnInit, OnChanges { 
    @Input() menuItems; 
    @Input() position; 
    @Input() isDropdownMenuVisible: boolean; 

    @HostBinding('class') hostItemPositionClass; 
    @HostBinding('@slideToggle') dropdownAnimationState = SlideToggleOption.Hidden; 

    element: HTMLElement; 

    constructor(private elementRef: ElementRef) { 
     this.element = elementRef.nativeElement; 
    } 

    ngOnInit() { 
     this.element.parentElement.style.position = 'relative'; 
     this.hostItemPositionClass = `menu-container-${this.position}`; 
     this.dropdownAnimationState = SlideToggleOption.Hidden; 
    } 

    ngOnChanges() { 
     this.dropdownAnimationState = 
      this.isDropdownMenuVisible ? SlideToggleOption.Visible : SlideToggleOption.Hidden; 
    } 
}  

これは私のhtmlです：私はこのコンポーネントを使用する場合

<div class="menu-item" *ngFor="let menuItem of menuItems"> 
    <icon iconClass="{{menuItem.icon}}"></icon> 
    <span>{{menuItem.text}}</span> 
</div> 

HTMLは次のようになります。親コンポーネントで

 <button class="btn-icon" 
       (click)="isMoreDropdownMenuVisible = !isMoreDropdownMenuVisible"> 
      <icon iconClass="icon-more"></icon> 
     </button> 
     <dropdown-menu [menuItems]="navSectionRightItems" 
         [position]="dropdownMenuPosition" 
         [isDropdownMenuVisible]="isMoreDropdownMenuVisible"> 
     </dropdown-menu> 

[isMoreDropdownMenuVisible]ですbooleanはデフォルトをfalseに設定します。

[menuItems]と[position]プロパティは、現在の問題とは関係がないので省略しました。

私はBTN-アイコンのクラスでボタンをクリックすると、私は次のエラーを取得する：

私が間違って何をしているのですか？

Answer 1

変更検出が変更された場合、Angularは好きではありません。 ngOnInit()が変更検出によって呼び出されます。 ChangeDetectorRef

constructor(private cdRef: ChangeDetectorRef) {} 

を注入し、明示的に

ngOnInit() { 
    this.element.parentElement.style.position = 'relative'; 
    this.hostItemPositionClass = `menu-container-${this.position}`; 
    this.dropdownAnimationState = SlideToggleOption.Hidden; 
    this.cdRef.detectChanges(); 
}