Структурная директива с селектором в формате «элемент [атрибут]» - PullRequest
Новая
       17

Структурная директива с селектором в формате «элемент [атрибут]»

0 голосов
/ 22 апреля 2020

Я пытаюсь создать структурную директиву Angular, которая будет доступна только для указанного c HTML элемента (div).

Однако, когда я пытаюсь установить структурную директиву селектора на div[nameOfDirective], возникает ошибка: «Невозможно связать с« nameOfDirective », поскольку оно не является известным свойством« div ».».

Работает отлично, если селектор является только атрибутом [nameOfDirective].

Я создал плункер, имитирующий ошибку: https://plnkr.co/edit/C1c93HUpi1vWk9dP
Плункер не будет просматривать, так как происходит ошибка компиляции. Откройте консоль, чтобы увидеть ее.
Если вы измените селектор директив в файле restricted-element.directive.ts, он будет нормально просматриваться.

Я что-то не так делаю или это ошибка?

1 Ответ

0 голосов
/ 22 апреля 2020

Ошибка в html, в этом случае директива должна быть объявлена ​​так: 

<div [red]="'fasf'" [redData]="'0909'">
    Restricted Element Directive
</div>

Подробнее об этом можно прочитать в https://angular.io/guide/attribute-directives#binding -to-an- input-property

Я редактирую, чтобы объяснить, как правильно использовать директиву

После прочтения в документации angular, как она работает и что она это директива, я мог видеть, что вы пытаетесь сделать, это ошибка, учитывая, что если вы используете синтаксис *, вы говорите Angular, что вы объявляете структурную директиву, и поэтому Angular всегда будет иметь значение ваш элемент в том, что я показываю ниже:

Здесь мы используем структурную директиву ngIf: 

<div *ngIf="hero" class="name">{{hero.name}}</div>

И Angular всегда будет переводить атрибут в элемент, обернутый вокруг хоста элемент, как это. * ngIf 

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

И хотя нигде в документации angular не говорится, что вы не можете использовать селектор из структурной директивы для определенного элемента c DOM, он также абсолютно ничего не говорит о том, что Вы можете использовать его.

Но если вы скажете, что структурная директива выполняет следующее преобразование:

  • Директива * ngIf перемещена в элемент, где она стала привязкой свойства, [ngIf ].
  • Остальная часть, включая атрибут class, перемещена внутри элемента.

И именно здесь возникает ошибка, отображаемая консолью, поскольку ваш селектор указывает, что сетевая директива может быть только внутри div, и Angular манипулировал директивой и поместил ее в шаблон ng.

Когда это объявлено: 

@Directive({
  selector: 'div[red]'
})

Директива ограничена только в div, и если в html вы скажете Angular использовать его как структурированную директиву: 

<div *red="'fasf'; data '0909'">
  Restricted Element Directive
</div>

Внутренне, Angular переводится следующим образом: 

<ng-template red [red]="'fasf'" [redData]="'0909'">
  <div>Restricted Element Directive</div>
</ng-template>

Какая причина Это ошибка, потому что ваша директива была ограничена для элемента div. Документация объясняет это гораздо более кратко и явно здесь https://angular.io/guide/structural-directives#the -asterisk - префикс

Итак, чтобы ваш код не вызывал ошибку:

  • Вы должны использовать директиву атрибута
  • Или снять ограничение div.
...