Angular 6：如何从另一个组件访问元素

Question

在footer.component

signIn() {
    const el = this.elRef.nativeElement.querySelector('.UserTrigger');
    console.log(el); // null
    el.dispatchEvent(new Event('click'));
}

-

<a (click)="signIn()">Sign In</a>

---

在header.component.html

<div #userTrigger class="UserTrigger" (click)="loginModal()">Sign In</div>

问题

在上面，我试图单击页脚中的登录按钮，这将触发位于页眉中的登录模式。我知道我只能在页脚中引用模态，但这不是我想要的。

如何从另一个组件访问元素？

Answer 1

您是否考虑过将与登录相关的事件/状态迁移到专用服务中？然后，您可以将服务注入到需要响应（单击）事件的任何组件中，并将其路由到模态所在的组件中。这消除了以下事实：两个不具有父/子关系的组件需要以这种方式进行交互。