我有一个模板,其中包含文本框,一个'span'标记和一个'div'标记。
'div'标签有'selectedColor'自定义指令。当输入值改变时,我想更改'span'和'div'标签的背景颜色。
所以最后我希望我的指令对输入变化作出反应并设置'div'标签的背景颜色。
我还想在输入值更改事件中更改'span'背景颜色。
boot.ts
import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';
import {selectedColorDirective} from 'src/directive';
import {Directive, ElementRef, Renderer, Input} from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<input type="text" [(ngModel)]="color" />
<br>
<span > I'm {{color}} color <span>
<div [mySelectedColor]="color"> I'm {{color}} color </div>
`,
directives: [selectedColorDirective]
})
export class AppComponent{
color:string;
constructor(el:ElementRef,renderer:Renderer)
{
this.color="Yellow";
renderer.setElementStyle(el, 'backgroundColor', this.color);
}
}
bootstrap(AppComponent, []);
directive.ts
import {Directive, ElementRef, Renderer, Input} from 'angular2/core';
@Directive({
selector:"[mySelectedColor]",
host: {
// '(keyup)': 'changeColor()',
'(blur)': 'changeColor()',
}
})
export class selectedColorDirective{
@Input('mySelectedColor') selectedColor: string;
constructor(el: ElementRef, renderer: Renderer) {
//el.nativeElement.style.backgroundColor = 'yellow';
renderer.setElementStyle(el, 'backgroundColor', this.selectedColor);
}
changeColor(color:string)
{
console.log('Changed Detection' + " " + selectedColor);
//this.renderer.setElementStyle(this.el, 'backgroundColor', this.color);
}
}
此外,如果您可以解释有关@Input装饰器的更多信息。
答案 0 :(得分:4)
您可以在指令中创建@Input() someName: SomeType
并将其绑定到父组件中的字段或函数,如
<div [mySelectedColor]="color"
[someName]="someFieldInParent"> I'm {{color}} color </div>
另一种方法是查询父组件中的指令并直接调用函数或设置字段。
export class AppComponent{
@ViewChild(selectedColorDirective) myDirective: selectedColorDirective;
ngAfterViewInit() {
myDirective.changeColor('red');
}
}
您还可以直接绑定到class
并使用这些类选择器分配CSS。
例如,请参阅此http://plnkr.co/edit/nm8RgxMtqdEDyQWQGeUp?p=preview
目前不支持同时使用绑定作为选择器,因此您必须列出指令选择器以及绑定到每个指令选择器的属性。似乎只支持[(myDirective)]="someField"
。
我用过
host: {
'(keyup)': 'changeColor()',
'[style.color]': 'selectedColor', // <==
}
用于设置样式(我还更改了AppComponent
以使用这种方式)。这比使用ElementRef
和Renderer
更受青睐。我使用ElementRef
和Renderer
作为<span>
标记,因为我没有看到指令中另一个元素的另一种方式。
答案 1 :(得分:-1)
最简单的方法,在你的指令中:
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = "yellow";
}