angular - 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>

问题

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

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

标签： angular

Answer 1

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