javascript - 如何在应用程序组件中的ajax调用响应后再次显示标题侧栏

Question

我正在使用以下AWS api来根据访问 token 获取用户信息(在app.component.ts中进行一些计算之后)。

this.cognitoidentityserviceprovider.getUser({"AccessToken":accToken},
                    function(err, data){
             // bind this data to header 
});

我希望 api 返回数据绑定(bind)到标题栏，但标题组件较早渲染，我无法再次重新渲染。我的路由结构如下layout.component.html

<div class="wrapper">
    <!-- top navbar-->
    <app-header class="topnavbar-wrapper"></app-header>
    <!-- sidebar-->
    <app-sidebar class="aside"></app-sidebar>
    <!-- Main section-->
    <section>
        <!-- Page content-->
        <div class="content-wrapper">
            <router-outlet></router-outlet>
        </div>
    </section>
    <!-- Page footer-->
    <footer app-footer></footer>
</div>

Answer 1

app.component.html 中的代码

<div class="wrapper">
    <!-- top navbar-->
    <app-header class="topnavbar-wrapper" [apiresponse]="apidata"></app-header>
    <!-- sidebar-->
    <app-sidebar class="aside"></app-sidebar>
    <!-- Main section-->
    <section>
        <!-- Page content-->
        <div class="content-wrapper">
            <router-outlet></router-outlet>
        </div>
    </section>
    <!-- Page footer-->
    <footer app-footer></footer>
</div> 

在app.component.ts中

let self = this ;
apidata:any = "";
this.cognitoidentityserviceprovider.getUser({"AccessToken":accToken},
                    function(err, data){
     // bind this data to header 
     self.apidata = data;
});

在 header.component.ts 中

export class HeaderComponent implements OnInit {
  @Input() apiresponse : any;
  //your code here  
}

在 header.component.html 中使用 {{apiresponse}}