Question

我为此搜索了很多内容，但不幸的是我没有得到任何东西。

上下文

我有一个组件，我有两个子选择器，如下所示。

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

因此，根据此导航栏组件将被调用，导航栏包含需要一些时间的承诺。但是在完成导航栏组件中的承诺之前，我的流程转到侧栏组件。但我希望控制不应该转到侧栏组件，直到它清除导航栏组件中的承诺。

Answer 1

试试这个：

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

阻止下一个组件调用，直到承诺完成角度2中的另一个组件

1 个答案: