angular2自定义指令输入语法

时间:2016-02-21 17:37:37

标签: html angular angular2-template angular2-directives angular2-forms

我创建了一个自定义指令,并将选择器值设置为“ [除非指令] ”。

该指令获取一个布尔值并使用它来改变视图:

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:模板解析错误:无法绑定到'givenBoolean',因为   它不是一个已知的原生属性(“......只有'假''才能显示出来!'):StructualDirectivesComponent @ 47:39

我想我的语法错了,但我找不到哪里或为什么?

我在Angular2 Docs上查了一下,但是这个例子对输入和选择器使用相同的名称,这是我试图避免的。

任何人都可以知道更好的方法或者能找到我的语法问题吗?

感谢。

1 个答案:

答案 0 :(得分:6)

* prefix syntax is only a syntatic sugar。它扩展了指令声明。

  

*前缀语法是跳过<template>包装器标记并直接关注HTML元素重复或包含的便捷方法。 Angular会看到*并将HTML扩展为我们的<template>标记。

* 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不是组件中的属性(不是指令),因此会出现错误。

因此,如果您想要自定义行为,我建议您使用扩展版本进行实验,并且只有在它运行后才转到*语法,这将更容易推理。