@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()装饰器表示.

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