ngSwitch - это директива атрибутов ИЛИ структурная директива?

Я немного запутался в отношении директивы ngSwitch — будь то 'директива атрибутов' или 'структурная директива'.

Директивы атрибутов записываются с помощью «квадратных скобок», таких как [ngStyle], [ngClass] и т. д. (и мы пишем это как [ngSwitch], что означает «Директивы атрибутов»).

Структурные директивы записываются с помощью 'aestrick', например *ngFor, *ngIf и т. д. (и мы записываем случаи как *ngSwitchCase="...", что означает, что это структурная директива).

<div [ngSwitch]="colorValue">
    <p *ngSwitchCase="red">Red</p>
    <p *ngSwitchCase="blue">Blue</p>
    <p *ngSwitchCase="green">Green</p>
</div>

Согласно приведенному выше коду, становится очень запутанным классифицировать ngSwtich по любой из категорий директив! Может ли кто-нибудь помочь мне понять тип директивы ngSwitch?


javascript angular dom angular2-directives ng-switch
person Deadpool    schedule 05.11.2018    source источник

Ответы (5)


arrow_upward
4
arrow_downward

[ngSwitch] — это директива атрибута, используемая в сочетании с *ngSwitchCase и *ngSwitchDefault, которые являются структурными директивами.

Это ясно объяснено в документации Angular...

  • NgSwitch — директива атрибута, которая изменяет поведение сопутствующих директив.
  • NgSwitchCase — структурная директива, которая добавляет свой элемент в DOM, когда его связанное значение равно значению переключателя, и удаляет связанное значение, когда оно не равно значению переключателя.
  • NgSwitchDefault — структурная директива, добавляющая свой элемент в DOM при отсутствии выбранного NgSwitchCase.

https://angular.io/guide/built-in-directives#switching-cases-with-ngswitch

person j3ff    schedule 05.11.2018
comment
И все же в тех же документах : Этот раздел является введением в общие структурные директивы: NgIf, NgSwitch, NgForOf?, возможно, было бы лучше процитировать NgSwitch сама по себе не является структурной директивой. Это директива атрибута, которая управляет поведением двух других директив switch. Вот почему вы пишете [ngSwitch], а не *ngSwitch.... из здесь - person Nick; 05.11.2018
comment
Ссылка, вероятно, устарела. Попробуйте: angular.io/api/common/NgSwitch - person Kieran Ryan; 14.04.2021
comment
@KieranRyan Спасибо, я обновил устаревшую ссылку на новый связанный раздел документации. - person j3ff; 14.04.2021

arrow_upward
0
arrow_downward

Насколько я понимаю, "структурная директива" изменяет структуру дома. директива атрибута изменяет атрибут дома, такой как цвет, фон и т. д.

ngSwitch изменяет длину своих дочерних элементов, поэтому это структурная директива,

person junk    schedule 05.11.2018

arrow_upward
0
arrow_downward

Это структурная директива.

Структурные директивы обновляют макет DOM, добавляя или удаляя элементы.

person Sajeetharan    schedule 05.11.2018
comment
NgSwitch сам по себе не является структурной директивой - person Nick; 05.11.2018
comment
github.com/ angular/angular/blob/7.0.2/packages/common/src/ - person Sajeetharan; 05.11.2018

arrow_upward
0
arrow_downward

Структурная директива:

Что такое структурные директивы?

Структурные директивы отвечают за разметку HTML. Они формируют или изменяют структуру DOM, обычно добавляя, удаляя или манипулируя элементами.

Как и в случае с другими директивами, вы применяете структурную директиву к основному элементу. Затем директива делает то, что должна делать с этим хост-элементом и его потомками.

Структурные директивы легко распознать. Звездочка (*) предшествует имени атрибута директивы, как в этом примере.

См.: https://angular.io/guide/structural-directives

person Dinesh Ghule    schedule 05.11.2018

arrow_upward
0
arrow_downward

ngSwitch — это встроенная структурная директива. [https://angular.io/guide/structural-directives]

@j3ff: Звездочка (*) в * ngSwitchCase - это просто синтаксис сахара, он не указывает тип директивы.

Можно так долго писать...

<div class="course-category" [ngSwitch]="colorValue">
 <ng-template [ngSwitchCase]="'RED'">
  <div>
   <p>Red</p>
  </div>
 </ng-template>
person altergothen    schedule 18.12.2018