Зачем угловой директиве ngIf скобка, если мы не хотим связывать ее с компонентным полем? - PullRequest
Новая
       9

Зачем угловой директиве ngIf скобка, если мы не хотим связывать ее с компонентным полем?

0 голосов
/ 16 сентября 2018

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

например, почему не работает приведенный ниже код: 

<ng-template ngIf=false>
     <h3>Test</h3>
</ng-template>

, если мы используемскобка ([ngIf] = false), она работает, но, насколько я знаю, скобка используется, когда мы хотим связать атрибут тега http или директиву с переменной компонента

Например, директива ngClass работает без скобки: 

<h2 ngClass='myclass'>title</h2>

1 Ответ

0 голосов
/ 17 сентября 2018

Краткий ответ : при использовании ngIf без скобок - вы оцениваете строку. и поскольку любая строка, отличная от пустой строки, принимает значение true, элемент отображается.

Длинный ответ : Когда вы помещаете *ngIf="boolean" в элемент, скажем, div, то это точно так же, как это: 

<ng-template [ngIf]="boolean">
     <div> ... </div>
</ng-template>

Пока все хорошо, вы, возможно, уже читали это из угловой документации . Как ни странно, вы не хотели приукрашивать его и сразу пошли к использованию ng-template.

Теперь вы спрашиваете, что произойдет, если я уберу скобки, де-факто, отбросив одностороннюю привязку. и просто установить значение этой директивы ngIf.

То, что происходит, является точным поведением, которое происходит, когда вы используете другие атрибуты для элементов. скажем, [class]. если вы используете [class]="text-red" для элемента. вы получите класс с именем undefined для вашего элемента. Вы только что попытались использовать неопределенный объект в качестве имени класса.

, поэтому, если мы предположим, что это правило CSS действует: 

.text-red { color: red }

если скобки не используются, ожидается строка. 

<div class="text-red"> I AM RED </div>  // text is red

при использовании скобок ожидается выражение , добавьте апостроф для выражения строки. 

<div [class]="'text-red'"> I AM RED </div>  // text is red

надеюсь, это прояснит ситуацию

...