Как правильно условно включить пользовательский компонент без его инициализации с помощью angular 5? - PullRequest
Новая
       15

Как правильно условно включить пользовательский компонент без его инициализации с помощью angular 5?

1 голос
/ 11 февраля 2020

У меня есть компонент (именованная карточка), который включает другой компонент (названный граф) в другой компонент (названный правкой), но я не хочу, чтобы компонент B инициализировался сам. Поэтому я попытался добавить условие в тег ng-content, но компонент B все еще инициализируется.

Шаблон Редактирование компонента : 

<component-card>
    <component-graph></component-graph>
</component-card>

Шаблон компонентная карта : 

<mat-card>
   ...
   <mat-card-content *ngIf="open">
      <ng-content></ng-content>
      <!-- doesn't work too<ng-content *ngIf="open"></ng-content> -->
   </mat-card-content>
</mat-card>

Граф компонента машинопись: 

ngOnInit() {
    console.log('init'); // this is called
    // i don't want this component to load the data before he's displayed
    this.loadData();
}

Здесь open всегда ложно но компонентный граф все еще вызывает его ngOnInit метод

, поэтому я попытался создать вывод в компонентной карте , который испускает значение open когда он изменяется

и в редактировании компонента я добавляю новую переменную, которая принимает состояние открытия каждый раз, когда изменяется: 

<component-card (openStateChange)="displayGraph = $event>
    <component-graph *ngIf="displayGraph"></component-graph>
</component-card>

Это работает, но я не знаю, есть ли другой способ сделать это должным образом, возможно, используя ng-content для примера, если у кого-то есть идея, потому что я не нашел статей по этому вопросу ... возможно, это правильный путь, потому что график компонентов относится к редактированию компонентов , но я предпочитаю спрашивать.

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

1 Ответ

0 голосов
/ 11 февраля 2020

Может быть, я что-то упускаю ... но ... почему мы не можем просто поместить директиву ngIf в mat-card и ng-content? (в шаблоне компонента A)

Таким образом, весь элемент содержимого не будет инициализирован, что не позволяет компоненту B загружаться 

<mat-card>
...
   <mat-card-content *ngIf="open">
      <ng-content *ngIf="open"></ng-content>
   </mat-card-content>
</mat-card>
...