如何在组件初始化后更新angular 2动画状态

我有一个简单的下拉组件，我想动画。 问题在于，尽管控制动画状态的变量以值inactive开始，并且当组件加载时，我的下拉列表仍然出现，并且只有在我将鼠标悬停在组件上后，才会获得正确的值。我不能在样式文件中放置零高度和填充，因为我在动画中使用带“*”的基值引用。我已经尝试在我的ngOnInit方法中使用ChangeDetectorRef

<li (mouseenter)="showServicesSubMenu()"
                    (mouseleave)="hideServicesSubMenu()">
                    <a class="nav-link user-menu-item"
                       [@servicesLinkShadowState]="servicesLinkState"
                       href="javascript:void(0)"
                       id="services-menu-item"
                       routerLinkActive="active-menu active-services"
                       routerLink="services"
                       jhiTranslate="global.menu.services.main">
                        Послуги
                    </a>
                    <ul>
                        <li class="service-sub-menu"
                            *ngFor="let childNode of servicesOptions"
                            [@submenuDropdown]="servicesLinkState">
                            <a [routerLink]="childNode.href"
                               [jhiTranslate]="childNode.translateVar">
                                {{childNode.name}}
                            </a>
                        </li>
                    </ul>
                </li>

trigger('submenuDropdown',[
            state('active', style({height:'*', padding:'10px', borderBottom: '2px solid #b90062'})),
            state('inactive', style({height:'0', padding:0, borderBottom:'0px solid #b90062'})),
            transition('active<=>inactive', animate('250ms'))
        ])

---

如果我理解您的问题，您可以使用css显示属性：

 trigger('submenuDropdown',[
            state('active', style({height:'100%', padding:'10px', borderBottom: '2px solid #b90062',display:'block'})),
            state('inactive', style({height:'0', padding:0, borderBottom:'0px solid #b90062',display:'none'})),
            transition('active<=>inactive', animate('250ms'))
        ])]

---

我已经为此创建了plunker。请看一看：

对不起，这只是我最初的动画状态中的一个输入错误。它发生在连续编码12小时后