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

为什么我必须只将 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>

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

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

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