@Input() 装饰器和指令 Angular-2答案

【问题标题】：@Input() Decorator and directives Angular-2@Input() 装饰器和指令 Angular-2
【发布时间】：2017-03-19 17:18:22
【问题描述】：

我是 angular2 的新手，我有 2 个问题：-

1.我想知道为什么这是正确的

<p myHighlight [color1]='color' defaultColor="violet">Highlight me!</p>

这些都不是

<p myHighlight color1='color' defaultColor="violet">Highlight me!</p>

<p myHighlight [color1]='color' [defaultColor]="violet">Highlight me!</p>

为什么我必须只将 1 个属性放在括号中，而另一个不带括号。

2. 如何在我的代码中使用@Input() 指令而不使用别名。它适用于多个属性吗？这是我的指令代码：

import { Input, Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
    selector: '[myHighlight]'
})
export class myDir {
    constructor(private el: ElementRef) {
    }

    @Input('color1') color: string;//for ts code 'color' for html code 'myHighlight' i.e template component
    @Input('defaultColor') defaultColor: string;
    @HostListener('mouseenter') onMouseEnter() {
        this.highlight(this.color || this.defaultColor);
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.highlight(null);
    }

    private highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

我的 html 代码：-

    <div>
    <input type="radio" name="clr" (click)="color='lightgreen'">Green
    <input type="radio" name="clr" (click)="color='yellow'">Yellow
    <input type="radio" name="clr" (click)="color='cyan'">Cyan
</div>

<p myHighlight [color1]='color' [defaultColor]='violet'>Highlight me!</p>

【问题讨论】：

好的，所以我只是更改了我的代码，如果我只有 1 个属性，则没有别名 @input 工作。
试试这个示例应用程序freakyjolly.com/…

标签： angular angular2-directives

【解决方案1】：

第一个

<p myHighlight color1='color' defaultColor="violet">Highlight me!</p>

color1 和默认颜色不是段落标签的属性，所以它不起作用。

第二

<p myHighlight [color1]='color' [defaultColor]="violet">Highlight me!</p>

您的指令将 color1 属性设置为您的段落标签，并且组件中没有紫罗兰色变量。

[ ] 中的所有内容都是属性绑定，这些属性使用 @Input() 装饰器表示。

注意： 当您使用组件变量绑定属性时，它应该在 [ ] 中。如果您使用的是直接值，则不需要用方括号括起来

【讨论】：

你在问我什么吗？
高亮我！
，这里的默认颜色不是属性而是属性，那它是如何工作的呢？ color1 和 defaultColor 都是属性，为什么在这种情况下它们都需要应用不同的语法
defaultColor也是一个属性，我用@input绑定它，为什么使用[defaultColor]是错误的，
您可以看到指令代码 bg 颜色通过切换与 color1 或 defaultColor 一起应用。 color1 和 defaultColor 都在组件中赋值（看组件代码）
我还是不明白，当“color1”和“defaultColor”都是我的属性时，为什么将“defaultColor”放在[]中不起作用，即
高亮我！