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

Question

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

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

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> 

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

EXCEPTION: Template parse errors: Can't bind to 'givenBoolean' since it isn't a known native property (" ... Only shown if 'false' wad enterded!"): StructualDirectivesComponent@47:39

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

Я искал его на Angular2 Docs, но в примере одно и то же имя для ввода и селектора - вещь, которую я пытаюсь избежать.

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

Спасибо.

Answer 1

* prefix syntax is only a syntatic sugar. Он расширяет объявление директивы.

The * prefix syntax is a convenient way to skip the <template> wrapper tags and focus directly on the HTML element to repeat or include. Angular sees the * and expands the HTML into the <template> tags for us.

Это отражено в * and <template> и Directive decorator/Lifecycle hooks.

Таким образом, в вашем случае не должно быть объекта [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 не является свойством в компоненте (а не директива), появляется ошибка.

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