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

Question

我是 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>

Answer 1

第一个

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

color1 和 default color 不是段落标签的属性，因此不会起作用。

第二

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

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

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

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

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

@Input() Decorator and directives Angular-2

angular2-directives

angular