2

我已經爲此搜索了很多,但不幸的是我沒有得到任何東西。阻止下一個組件的調用,直到承諾完成另一個組件的角度2

上下文

我有一個部件,其中我有兩個孩子選擇像下面。

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

所以根據這個導航欄部分將被調用,導航欄包含哪些需要一段時間的承諾。但是,在完成nav-bar組件中的承諾之前,我的流程會轉到側邊欄組件。 但我希望該控件不應該轉到邊欄組件,直到它清除導航欄組件中的承諾。

回答

0

試試這個:

@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:

<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> 
+0

謝謝,它的工作。 –

相關問題