Question

我正在使用角度动画来滑入和滑出栏。在这里，我正在从父组件调用栏的动画。

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制作动画。但是，我无法在父组件上获取动画触发器变量'slideInOut'。

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

}

我如何触发从子级到父级组件的动画变量？请帮助

从另一个组件触发角度动画

0 个答案: