Синтаксис ввода пользовательских директив angular2

Я создаю настраиваемую директиву и устанавливаю для параметра селектора значение «[except-directive]».

Директива получает логическое значение и использует его для изменения представления следующим образом:

import {Directive, TemplateRef, ViewContainerRef} from 'angular2/core';

@Directive({
    selector: '[unless-directive]',
    inputs: ['givenBoolean : myDirectiveFunction']
})

export class UnlessDirective {
    private _templateRef: TemplateRef;
    private _viewContainerRef: ViewContainerRef;


    constructor(_templateRef: TemplateRef, _viewContainerRef: ViewContainerRef) {
        this._templateRef = _templateRef;
        this._viewContainerRef = _viewContainerRef;
    }

    set myDirectiveFunction(condition: boolean) {
        !condition ? this._viewContainerRef.createEmbeddedView(this._templateRef)
            : this._viewContainerRef.clear();
    }
}

В моем шаблоне я пытался передать такое условие:

<div name="customDirective">
    <h2>Custom Directive</h2>
    <div>
        Enter true or false:
        <br/>
        <input type="text" #condition (keyup)="0"/>
        <div *unless-directive [givenBoolean]="condition.value != 'false'">
            Only shown if 'false' wad enterded!
        </div>
    </div>
</div>

Когда я запускаю код, я получаю эту ошибку:

ИСКЛЮЧЕНИЕ: ошибки синтаксического анализа шаблона: невозможно выполнить привязку к 'givenBoolean', поскольку это не известное собственное свойство ("... Отображается, только если введено 'false' wad!"): StructualDirectivesComponent @ 47: 39

Я предполагаю, что у меня неправильный синтаксис, но я не могу найти, где и почему?

Я нашел его в Angular2 Docs < / a>, но в примере используется одно и то же имя для ввода и селектора, чего я стараюсь избежать.

Может кто-нибудь знает способ получше или может найти мою синтаксическую проблему?

Спасибо.


angular html angular2-forms angular2-directives angular2-template
person Nir Schwartz    schedule 21.02.2016    source источник
comment
Вы добавили UnlessDirective в список директив компонента, в котором вы его используете? Для меня это звучит так, как будто директива не добавлена. Также проверьте, вызывается ли вообще конструктор директивы.   -  person Günter Zöchbauer    schedule 21.02.2016
comment
@ Günter Zöchbauer Да, я добавил к директивам в Компоненте, которые его используют. Это правильный способ сделать это? У меня нет синтаксической ошибки? правильно?   -  person Nir Schwartz    schedule 21.02.2016
comment
Да, AFAIK. Вы проверили, действительно ли создана директива?   -  person Günter Zöchbauer    schedule 21.02.2016
comment
Я меняю ввод и селектор на то же значение, и он работает, как в примере в Angular2 Docs, но когда я возвращаю его обратно, все равно та же ошибка. Что вы имеете в виду под созданием экземпляра?   -  person Nir Schwartz    schedule 21.02.2016

Ответы (1)


arrow_upward
6
arrow_downward

Синтаксис префикса * - это всего лишь синтаксический сахар. Он расширяет объявление директивы.

Синтаксис префикса * - удобный способ пропустить теги оболочки <template> и сосредоточиться непосредственно на элементе HTML, который нужно повторить или включить. Angular видит * и расширяет HTML в теги <template> для нас.

Это задокументировано в * and <template> и Декоратор директив / хуки жизненного цикла.

Итак, в вашем случае свойство [givenBoolean] не ожидается в директиве. Другими словами, это:

<div *unless-directive [givenBoolean]="condition.value != 'false'">
    Only shown if 'false' wad enterded!
</div>

Фактически становится:

<template [unless-directive]="">
    <div [givenBoolean]="condition.value != 'false'">
            Only shown if 'false' wad enterded!
    </div>
</template>

И поскольку givenBoolean не является свойством в компоненте (не директивой), возникает ошибка.

Поэтому, если вам нужно индивидуальное поведение, я предлагаю вам поэкспериментировать с расширенной версией, и только после того, как она заработает, вы перейдете к синтаксису *, это будет проще рассуждать.

person acdcjunior    schedule 21.02.2016