Запустить угловую анимацию из другого компонента - PullRequest
Новая
       38

Запустить угловую анимацию из другого компонента

0 голосов
/ 06 марта 2019

Я использую угловую анимацию, чтобы скользить в и из бара. Здесь я вызываю анимацию для бара из родительского компонента.

MyParentComponent.Html 

<button type="button" (click)="toggleMenu()"><button>
<app-navigation-bar [@slideInOut]="menuState"></app-navigation-bar>

MyParentComponent.ts 

 @ViewChild(childComponent) child: childComponent;
  toggleMenu(){
    this.child.toggleMenu();
}

Я пытаюсь заставить анимацию работать для моего childComponent из триггера кнопки родительского компонента. Но я не могу получить переменную lideInOut 'триггера анимации для родителя.

childComponent.ts 

@Component({
selector: 'app-navigation-bar',
template: './child.component.html',
styleUrls: ['./child.component.less'],
animations: [
trigger('slideInOut', [
  state('in', style({
    transform: 'translateX(0)'
  })),
  state('out', style({
    transform: 'translateX(100%)'
  })),
  transition('in => out', animate('400ms ease-in-out')),
  transition('out => in', animate('400ms ease-in-out'))
]),
]
})
export class childComponent implements OnInit {
constructor() { }
@Input() menuState:string = 'out';
ngOnInit() {
}
toggleMenu() {
// 1-line if statement that toggles the value:
this.menuState = this.menuState === 'out' ? 'in' : 'out';
}

}

Как вызвать переменную анимации от дочернего к родительскому компоненту? Помогите

...