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

Question

我是 Angular2 的新手，有两个问题：

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>

为什么我只能把一个属性放在括号中，另一个不用。

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>

- Daniyal Javaid

---

好的，我刚刚更改了我的代码，如果我只有一个属性，而没有别名@input也可以工作。 - Daniyal Javaid

尝试这个示例应用程序：http://www.freakyjolly.com/example-app-share-data-between-angular-components-using-input-decorator/ - Code Spy

Answer 1

首先

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

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

其次

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

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

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

注意：当您使用组件变量绑定属性时，应将其放在[ ]中。如果您使用直接值，则无需用方括号括起来。

- Aravind

---

你在问我什么吗？ - Aravind

你可以通过切换指令代码来查看背景颜色是使用color1还是defaultColor应用的。color1和defaultColor都在组件中分配（请查看组件代码）。 - Aravind

这个不起作用：<p myHighlight [color1]='color' [defaultColor]='violet'>突出显示我！</p>，但这个可以：<p myHighlight [color1]='color' defaultColor='violet'>突出显示我！</p>。 - Daniyal Javaid

不是变量，而是我在模板中分配的值。 <p myHighlight [color1]='color' defaultColor='violet'>突出显示我！</p> - Daniyal Javaid

当您使用组件变量绑定属性时，应该使用 [ ]。如果您使用直接值，则无需使用方括号，明白了吗？ - Aravind