HostBiding 표현식이 변경된 후에 변경되었습니다. 이전 값 'hidden'현재 값 'hidden'

Question

안녕 각도 애니메이션 API를 사용하여 호스트 요소의 높이를 애니메이션하려고합니다. 이건 내 HTML입니다

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

: 여기 내 코드 나는이 구성 요소를 사용하는 경우

<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]입니다 기본값이 false로 설정된 부울

[menuItems] 및 [position] 속성은 현재 문제와 관련이 없으므로 생략했습니다.

나는 다음과 같은 오류 얻을 BTN-아이콘의 클래스 버튼을 클릭하면 :

내가 잘못하고있는 중이 야 무엇을?

Answer 1

변경 감지가 변경되면 각도가 좋지 않습니다. 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(); 
}