HostBiding Ausdruck hat sich geändert, nachdem es überprüft wurde.Vorheriger Wert 'versteckter' aktueller Wert 'versteckt'

Question

Hi Ich versuche, die Höhe eines Host-Elements mit angulars animation api zu animieren. Hier ist mein Code:

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

Das ist mein html ist:

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

Wenn ich diese Komponente verwenden, die HTML sieht wie folgt aus:

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

In der übergeordneten Komponente [isMoreDropdownMenuVisible] ist Ein boolescher Wert, dessen Standardwert auf false gesetzt ist.

Ich habe die Eigenschaften [menuItems] und [position] weggelassen, da sie für das aktuelle Problem nicht relevant sind.

Wenn ich auf die Schaltfläche mit einer Klasse von BTN-Symbol ich die folgende Fehlermeldung erhalten:

Was mache ich falsch?

Answer 1

Angular nicht, wenn Änderungserkennung Änderungen verursacht. ngOnInit() wird durch Änderungserkennung aufgerufen.

um zu arbeiten ChangeDetectorRef

constructor(private cdRef: ChangeDetectorRef) {} 

und detectChanges() nach modifizierenden Eigenschaften Änderungserkennung explizit

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