时间戳

首页 > 解决方案 > 在Angular 5中等待子组件初始化

angular - 在Angular 5中等待子组件初始化

问题描述

export class OrderDetailComponent implements OnInit {
	isOpenReviewPDF: boolean;
	@ViewChild(forwardRef(() => OrderReviewPdfComponent)) orderReviewPdfComponent: OrderReviewPdfComponent;
	
	ngOnInit() {
	}
	
	pulic exportPdf() {
		this.isOpenReviewPDF = true;
		if (this.orderReviewPdfComponent.isViewInit) {
            // How can I wait this code
			doSomething();
		}
	}
}


export class OrderReviewPdfComponent implements OnInit, AfterViewChecked {
	public isViewInit = false;
	
	ngOnInit() {
	}
	
	ngAfterViewChecked() {
		this.isViewInit = true;
	}
}
 <div *ngIf="isOpenReviewPDF">
	<order-review-pdf [commissionIncentive]="commissionIncentive"
		[orderEntry]="orderEntry" [siteSurvey]='siteSurvey'></order-review-pdf>
</div>

我在父组件上有 exportPdf() 函数。如何等待这个条件（ if(this.orderReviewPdfComponent.isViewInit) ）为真运行 doSomething() 函数？目前 doSomething() 从不调用。

标签： angulartypescript

解决方案

如果要确保OrderReviewPdfComponent（子）模板已初始化，可以AfterViewInit在OrderDetailComponent

ngAfterViewInit当它的模板和它的孩子的模板被初始化时在一个组件上被调用。所以你应该调用 theexportPdf()的ngAfterViewInit方法，OrderDetailComponent你应该没问题。

export class OrderDetailComponent implements OnInit {

  ngOnInit() {}

  ngAfterViewInit() {
    // You can be sure that the template of OrderDetailComponent
    // and any of its child components was initialized in here.
    this.exportPdf();
  }

  pulic exportPdf() {
    doSomething();
  }

}

现在，如果您想exportPdf在您的OrderDetailComponent每次更改时调用您的，那么您可以在您的类型OrderReviewPdfComponent中创建一个@Output属性。然后，您可以在每次发生更改时调用它的方法：OrderReviewPdfComponentEventEmitteremit

import { ..., Output, ... } from '@angular/core';

export class OrderReviewPdfComponent implements OnInit, AfterViewChecked {
  @Output() somethingChanged: EventEmitter<any> = new EventEmitter<any>(null);

  ngOnInit() {}

  ngAfterViewChecked() {
    // This will inform OrderDetailComponent that OrderReviewPdfComponent
    // has initialized
    this.somethingChanged.emit();
  }
  ...

  // Also whenever something changes, just call `this.somethingChanged.emit();`
}

现在在模板中OrderDetailComponent，你可以somethingChanged通过做绑定到(somethingChanged)="exportPdf()"。尝试这个：

<div>
  <order-review-pdf 
    [commissionIncentive]="commissionIncentive" 
    [orderEntry]="orderEntry" 
    [siteSurvey]='siteSurvey'
    (somethingChanged)="exportPdf()">
  </order-review-pdf>
</div>

所以这样，你就不需要你的isOpenReviewPDF布尔属性OrderDetailComponent

推荐阅读