ngSwitch - это «Директива об атрибутах» ИЛИ «Директива о структуре»?

Question

Я немного запутался в отношении директивы 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?

Answer 1

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>

Answer 2

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

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

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

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

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

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

Answer 3

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

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

Answer 4

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

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

Вы получите ошибку, если попытаетесь установить *ngSwitch, потому что NgSwitch является директивой атрибута, а не структурной директивой. Он меняет поведение своих сопутствующих директив. Это не касается DOM напрямую.

Привязать к *ngSwitchCase и *ngSwitchDefault. Директивы NgSwitchCase и NgSwitchDefault являются структурными директивами, поскольку они добавляют или удаляют элементы из DOM.

https://angular.io/guide/template-syntax#the-ngswitch-directives

Answer 5

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

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