Question

当我们使用ng-template创建预定义模板时，将在使用前呈现内容。

当我们具有自动完成之类的元素，这些元素调用远程api来获取数据时，这是一个问题。

我想防止这种情况，仅在需要时呈现模板内容。

上下文：我有一个带有高级筛选器的表组件，当用户单击高级筛选器按钮时会打开该组件。我不希望在用户希望过滤器渲染之前渲染过滤器。

编辑：我的问题不在等待数据到达。我的问题是，在用户打开表高级过滤器之前，我不希望呈现自动完成功能。我的表是一个组件，并使用包含来获取过滤器。因此，我不想在使用该表的组件中使用IF，而是在控制过滤器何时显示的表本身中使用IF。

编辑：就我而言，这是一个错过的理解。实际上，内容不是在viewInit上呈现的。在隐藏模式下安装的表格高级过滤器中，渲染效果令人发指。在我的ngTemplateOutlet中放置一个* ngIf可解决此问题。

list-advanced-filter.component.html

<ng-container *ngIf="opened"
  [ngTemplateOutlet]="templateRef"
  [ngTemplateOutletContext]="{form: form}"
></ng-container>

Answer 1

父component.ts

{
public showTemplate:boolean;

public setShowTemplate(event){
this.showTemplate = event;
}

parent.html

<some-component *ngIf="showTemplate" (childShowTemplate)="setShowTemplate($event)"></some-component>

some-component.ts {

@Output()
childShowTemplate = new EventEmitter();

 ngOnInit(){ // or any method you want like ngOnChanges or whatever
  if(someCondition){
     this.childShowTemplate.emit(true);
  }else{
    this.childShowTemplate.emit(false);
  }
 }
}

通过这种方式，孩子可以决定是否要渲染。

或者您可以创建一种服务方法来处理这种情况...

防止ng-template在包含中呈现

list-advanced-filter.component.html

1 个答案: