我在页面上有一个 Headers 组件,页脚组件,导航组件和内容组件 .
<sa-header></sa-header>
<sa-navigation></sa-navigation>
<div id="main" role="main">
// I have put Profile page here using routing and I have First name and last name on profile page
<router-outlet></router-outlet>
</div>
<sa-footer></sa-footer>
现在在路由器插座中,我已经使用带有名字和姓氏的路由设置了一个配置文件页面,并根据配置文件页面的名字和姓氏,我想在Header组件中显示该名称 .
在页眉页面中,我有以下代码:
<div> <span>{{user.displayName }}</span> <i class="fa fa-angle-down"></i></div>
我尝试使用以下链接但在我的情况下没用 .
Angular 2 - Update @input value of component on click on different component
Angular 2/TypeScript: @Input/@output or input/output?
我也尝试在会话中获取并设置这些名称,但我的 Headers 页首先加载,所以一旦我更改了配置文件页面,它不会影响 Headers 页 .
如何更改 Headers 页中的名称?
1 回答
我认为你可以使用服务从内部组件到外部组件进行通信
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service