自定义指令与Angular2中的组件之间的通信 [英] Communication between custom directive and component in Angular2

问题描述

我有一个带有文本框，一个"span"标签和一个"div"标签的模板.

I have a template which has textbox, one 'span' tag and one 'div' tag.

'div'标签具有'selectedColor'自定义指令.我想在输入值更改时更改"span"和"div"标签的背景颜色.

'div' tag has 'selectedColor' custom directive. I want to change background color of 'span' and 'div' tags when input value is changed.

所以最后我希望我的指令对输入更改做出反应并设置'div'标签的背景颜色.

So finally I want my directive to react on input change and sets background color of 'div' tag.

我还想在输入值更改事件中更改'span'背景颜色.

I also want to change 'span' background color on input value change event.

柱塞

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装饰器.

Moreover if you could explain more about @Input decorator.

推荐答案

您可以在指令中创建@Input() someName: SomeType并将其绑定到父组件(如

You can create an @Input() someName: SomeType in your directive and bind it to a field or function in the parent component like

<div [mySelectedColor]="color" 
    [someName]="someFieldInParent"> I'm {{color}} color </div>

另一种方法是在父组件中查询指令并直接调用函数或设置字段.

Another way is to query the directive in the parent component and invoke functions or set fields directly.

export class AppComponent{
  @ViewChild(selectedColorDirective) myDirective: selectedColorDirective;

  ngAfterViewInit() {
    myDirective.changeColor('red');
  }
}

您还可以直接绑定到class并使用这些类选择器分配CSS.

You can also bind directly to class and assign CSS by using these class selectors.

例如参见以下 http://plnkr.co/edit/nm8RgxMtqdEDyQWQGeUp?p=preview

当前不支持同时使用绑定作为选择器，因此，您必须列出指令选择器和绑定到每个选择器的属性.似乎仅支持[(myDirective)]="someField".

Using a binding as selector at the same time is not supported currently, therefore you have to list the directive selector and the property you bind to each. Only [(myDirective)]="someField" seems to be supported.

我用过

host: {
  '(keyup)': 'changeColor()',
  '[style.color]': 'selectedColor', // <==
}

用于设置样式(我也更改了AppComponent以使用这种方式).首选使用ElementRef和Renderer.我为<span>标签使用了ElementRef和Renderer，因为我没有从另一元素的指令中看到另一种方式.

for setting the style (I also changed the AppComponent to use this way). This is preferred to using ElementRef and Renderer. I used ElementRef and Renderer for the <span> tag though because I don't see another way from the directive on another element.

这篇关于自定义指令与Angular2中的组件之间的通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！