3

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

该指令获取一个布尔值并使用它来更改视图，如下所示：

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上查找了它，但该示例对输入和选择器使用相同的名称，这是我试图避免的事情。

谁能知道更好的方法或可以找到我的语法问题？

谢谢。

4

1 回答 1

6

*前缀语法只是一个语法糖。它扩展了指令声明。

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

这记录在Directive decorator/Lifecycle hooks* 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不是组件中的属性（不是指令），因此会出现错误。

因此，如果您想要自定义行为，我建议您尝试使用扩展版本，并且只有在它工作后您才能转到*语法，它会更容易推理。

于 2016-02-21T18:28:30.993 回答