我的组件结构看起来大致如此 . 我的应用程序组件有一个导航栏和路由器插座 . 导航栏包含徽标,一些通用链接以及一些仅在用户登录和身份验证时显示的特定链接 . 路由器插座根据路由URL加载主组件或墙组件 . 主组件包含登录组件,其中包含常规用户标识,密码和提交按钮 . 在提交时,登录成功后,登录组件将发出一个事件 . 现在,我如何在home组件(父组件)中捕获该事件?
如果我直接在应用程序下使用主页选择器,我可以捕获该事件,将其冒泡到应用程序,然后使导航栏中的隐藏链接可见 .
我不知道如何捕获home组件中登录组件发出的事件,因为它已加载到路由器输出中 .
<!-- app.html -->
<div>
<nav>
<!-- Product logo -->
<!-- Some generic links -->
<!-- some hidden icons to be shown on authentication -->
</nav>
<router-outlet></router-outlet>
</div>
<!-- home.html -->
<div>
<login></login>
</div>
<!-- login.html -->
<div>
<!-- user name and password -->
<!-- submit button - the associated ts file raises an event on successful login -->
</div>
<!-- wall.html -->
<div>
<!-- Content to be displayed on authentication -->
</div>
谢谢,希尔帕
3 回答
我想出了这个问题,虽然我还没有解决方案 . 原来在 Map 上调用的方法无法访问类级对象 . 如果我通过身份验证调用发出事件,它就可以正常工作 . 我尝试将事件 Launcher 对象传递给映射方法,但这也没有帮助 . 如何将对象传递给映射方法范围?
我服务中的代码如下所示:
抱歉延迟,我就是这样做的:
auth.service.ts
然后任何组件都可以注入 AuthService 并知道authedUser何时更改,注销等 . 以我的Navbar为例:
navbar.component.ts
然后在我的导航栏模板中,我可以选择根据身份验证状态显示内容:
Obviously a lot of these classes are truncated for brevity.
如果您对如何在标头中发送令牌感到好奇,这里是我创建的HttpClient类的一个简单示例(为简洁而截断):
http.service.ts
然后在我的其他组件中,我可以注入我的HttpClient类并使用它将令牌自动放置在 Headers 中,I.E .
some.component.ts
对这个解决方案的影响 - > http://plnkr.co/edit/KfcdDi?p=info
这里的提醒服务完全符合我的要求 .