Question

我使用Angular 4.我有一个指令，它是一个按钮，插入到父模板中，如下所示：

<button (emitPdfUrl)="getInvoicePdfUrl($event);" pdfButton [pdfEl]="pdf">
    <fa name="file-pdf-o"></fa> Download PDF
</button>

当父完全呈现时，如何从指令运行方法getPdf()？我需要这个，因为这个函数将从她父模板的其他部分获取innerHtml。现在发生的是，指令的功能（getPdf()）获得了一半显示的模板，即。没有父项加载变量的模板，因此，innerHTML内部没有加载数据，所以函数采用＆＃34;空＆＃34;模板。谢谢你的任何建议！：）

Answer 1

父组件有责任提供能够遵循所需执行顺序的方法。

这可以通过一对RxJS科目来实现：

private componentInitSubject = new AsyncSubject().ignoreElements();
public pdfUrlSubject = new ReplaySubject(1);

constructor() {
  this.pdfUrlSubscription = this.componentInitSubject
  .concat(this.pdfUrlSubject)
  .subscribe(url => this.getInvoicePdfUrl(url));
});

ngOnAfterViewInit() {
  this.componentInitSubject.complete();
}

getInvoicePdfUrl(url) {
  // starts to receive urls only after completion of componentInitSubject
}

可以向主题发送值，而不是直接调用getInvoicePdfUrl：

<button (emitPdfUrl)="pdfUrlSubject.emit($event)" pdfButton [pdfEl]="pdf">

pdfUrlSubscription应该取消订阅组件销毁。

Angular 4 - 如何在其父完全呈现之后运行指令方法

1 个答案: