Куда поставить ngIf?

У меня есть вопрос о ngIf в Angular 2. В настоящее время я разрабатываю свое первое более крупное приложение Angular 2, и мне интересно, как лучше всего позиционировать ngIf. Я думаю, что должна быть определенная последовательность. Я могу придумать три варианта загрузки дочернего компонента:

В div родительского компонента:

<div id="parent-component-div" *ngIf="loadChildComponent">
  <app-child-component></app-child-component>
</div>

В теге дочернего компонента родительского компонента:

<div id="parent-component-div">
  <app-child-component *ngIf="loadChildComponent"></app-child-component>
</div>

В дочернем компоненте:

<!-- parent-component -->
<div id="parent-component-div">
      <app-child-component></app-child-component>
</div>

<!-- child-component -->
<div id="child-component-div" *ngIf="loadComponent">
      <!-- child-component logic -->
</div>

Лично я придерживаюсь первого варианта, но вижу преимущества третьего. Но что такое условность? Есть ли конвенция?


angular angular-cli angular-ng-if convention
person tschaka1904    schedule 04.03.2017    source источник
comment
Ну, это зависит от того, что вы хотите отключить/скрыть в своем приложении. NgIf полностью удаляет элемент DOM, поэтому, если вы уверены, что вам не понадобится ваш дочерний компонент позже, его можно безопасно отключить в родительском. Если вы считаете, что вам нужно показать это позже, сделайте часть скрытия/удаления с помощью ngIf в вашем дочернем компоненте. Помните, что вы, конечно, можете также использовать ngShow/ngHide, если элемент точно будет использоваться позже.   -  person Janne    schedule 04.03.2017

Ответы (2)


arrow_upward
3
arrow_downward

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

<div id="parent-component-div">
  <app-child-component *ngIf="loadChildComponent"></app-child-component>
</div>

Затем мы можем предположить, что эта часть html является шаблоном. Итак, если вы поместите ngIf на сам элемент, и мы знаем, как преобразуется структурная директива ngIf, мы получим этот DOM:

<div id="parent-component-div">
  <template [ngIf]="loadChildComponent">
      <app-child-component></app-child-component>
  </template>
</div>

что имеет смысл. Если вы поместите ngIf в родительский div следующим образом:

<div id="parent-component-div" *ngIf="loadChildComponent">
  <app-child-component></app-child-component>
</div>

parent-component-div становится частью шаблона, и это не похоже на то, что вы хотите сделать.

Третий вариант мне кажется наименее подходящим, поскольку компоненту все равно, отображается он или нет. Если он показан, то он должен продолжить свою функциональность.

person Max Koretskyi    schedule 04.03.2017
comment
Да. Я чувствую то же самое в отношении третьего варианта. Я начал с этого варианта, но чувствую себя с ним все хуже и хуже. - person tschaka1904; 04.03.2017
comment
@ tschaka1904, да, подумайте о том, что я сказал о просмотре контента ng-if в качестве шаблона, и вы увидите, что второй вариант кажется наиболее подходящим - person Max Koretskyi; 04.03.2017
comment
@ tschaka1904, также рассмотрите возможность принятия ответа, если он помог :) - person Max Koretskyi; 05.03.2017
comment
Я думаю, что у меня есть вариант использования для третьего варианта. Я хочу отобразить индикатор загрузки. И у меня есть родитель с несколькими детьми, и у них также могут быть дети. Я не могу быть уверен, что все дочерние компоненты будут загружены, потому что это зависит от текущего содержимого, которое вы просматриваете. Каким-то образом мне нужно сообщить своему индикатору загрузки, что он может снова исчезнуть, потому что все загружено. Имея этот сценарий, возможно, стоит загрузить каждый компонент и использовать мой третий вариант. Но я также могу быть совершенно на неправильном пути. Вы сталкивались с подобным сценарием? - person tschaka1904; 15.03.2017

arrow_upward
0
arrow_downward

Мое мнение таково, что то, куда идет ngIf, во многом зависит от того, кому принадлежит переменная, к которой привязан ngIf.

Если настройка этого логического значения loadComponent является поведением, принадлежащим родительскому компоненту, вы можете выбрать вариант 2.

Но если loadComponent действительно принадлежит дочернему компоненту, то вариант 3 имеет больше смысла.

person snorkpete    schedule 04.03.2017