[英]block next component call until promise complete of another component in angular 2
I have googled a lot for this, but unfortunately i did'nt get anything. 我为此做了很多搜索,但是不幸的是我什么都没得到。
The Context 上下文
I have a component where i have two child selector like below. 我有一个组件,其中有两个子选择器,如下所示。
<div class="wrapper"> <div class="main-panel"> <navbar-cmp></navbar-cmp> <router-outlet></router-outlet> <!--<div *ngIf="!isMap()"> <app-footer></app-footer> </div>--> </div> <div class="sidebar" data-active-color="blue" data-background-color="white"> <!-- <div class="sidebar" data-color="red" data-image=""> --> <sidebar-cmp></sidebar-cmp> <!--<div class="sidebar-background" style="background-image: url(assets/img/sidebar-1.jpg)"></div>--> </div> </div>
So according to this nav-bar component will be called and nav-bar contain a promise which take some time. 因此,根据该nav-bar组件将被调用,并且nav-bar包含一个需要花费一些时间的承诺。 But my flow go to side-bar component before complete the promise in nav-bar component.
但是,在完成导航栏组件中的promise之前,我先转到侧栏组件。 But i want that control should not go to side-bar component until it clear the promise in nav-bar component.
但是我希望该控件不应该移到侧栏组件,直到它清除了导航栏组件中的承诺。
try this : 尝试这个 :
@Component({
selector: 'navbar-cmp',
templateUrl: './navbar-cmp.html',
})
export class NavBarComponent implements OnInit {
promiseIsCompleted :boolean = false;
constructor(private signUpService: SignUpService) {
}
ngOnInit() {
youPromise.then(()=>{
this.promiseIsCompleted = true;
})
}
html : html:
<div class="wrapper">
<div class="main-panel">
<navbar-cmp #navbar ></navbar-cmp>
<router-outlet></router-outlet>
<!--<div *ngIf="!isMap()">
<app-footer></app-footer>
</div>-->
</div>
<div class="sidebar" data-active-color="blue" data-background-color="white">
<!-- <div class="sidebar" data-color="red" data-image=""> -->
<sidebar-cmp *ngIf="navbar.promiseIsCompleted"></sidebar-cmp>
<!--<div class="sidebar-background" style="background-image: url(assets/img/sidebar-1.jpg)"></div>-->
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.