Angular Animation 在外部使用查询选择元素

Question

是否可以Element使用查询在 Angular 动画声明之外选择一个？我有这个代码。假设我确实有两个组成部分。

布局.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

app-header.component.html

<header  [@MobileNavAnimation]="isMenuNavOpened ? 'navOpened' : 'navClosed'">
    <input id="sideMenuInput" type="checkbox" [(ngModel)]="isMenuNavOpened"/>
</header>

这将像这样的结构呈现

<layout>
   <app-header></app-header>
   <router-outlet></router-outlet>
   <app-footer></app-footer>
</layout>

动画.ts

trigger('MobileNavAnimation', [
    transition('navClosed <=> navOpened', [
        query('layout', [
            state('navOpened', style({ position: 'absolute', left: '-100px', 'padding-right': '100px' }))
        ])
    ])
]);

如您所见，我将动画声明为app-header组件，但我的动画正在尝试更改更高的元素。这可能吗？

PS：我可以通过Input和Outputof实现这一点@angular/core，但我正在尝试尝试 Angular Animation 的功能。