@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>

Answer 1

第一

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

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

第二

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

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

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

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