Предотвратить рендеринг ng-шаблона при включении - PullRequest
Новая
       25

Предотвратить рендеринг ng-шаблона при включении

0 голосов
/ 24 августа 2018

Когда мы используем ng-template для создания предопределенного шаблона, содержимое отображается перед использованием.

Это проблема, когда у нас есть такие элементы, как автозаполнение, которые вызывают удаленный API для получения данных.

Я бы хотел предотвратить это и отображать содержимое шаблона только при необходимости.

Контекст: у меня есть компонент таблицы с расширенным фильтром, который открывается, когда пользователь нажимает кнопку расширенного фильтра. Я не хочу, чтобы фильтр отображался, пока пользователь этого не сделает.

Редактировать: Моя проблема не в ожидании поступления данных. Моя проблема в том, что я не хочу отображать автозаполнение, пока пользователь не откроет расширенный фильтр таблицы. Моя таблица является компонентом и использует transclusion для получения фильтра. Поэтому я не хочу использовать IF в компоненте, который использует таблицу, но в самой таблице, которая контролирует, когда должен отображаться фильтр.

РЕДАКТИРОВАТЬ: Это было неправильное понимание с моей стороны. На самом деле контент не отображается на viewInit. Рендеринг происходил в моем фильтре продвижения таблицы, который монтировался в скрытом режиме Размещение одного * ngIf в моем ngTemplateOutlet исправило проблему.

список продвинутый-filter.component.html 

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

1 Ответ

0 голосов
/ 24 августа 2018

Parent 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);
  }
 }
}

Таким образом, ребенок может решитьесли он хочет быть обработан или нет.

Или вы можете создать сервисный метод для обработки этой ситуации ...

...