指令导出数据angular 2

Question

我在将数据从指令发送到组件时遇到了一些麻烦，指令运行良好，每次我单击任何输入时它都会在控制台上绘制一条消息，代码如下：

    import {Component, HostListener, Directive, Output, EventEmitter} from '@angular/core';
@Directive({
    selector: 'input',
})
export class ListeningToHostComponent {
    name = '';
    @HostListener('click', ['$event.target'])
    onClick(btn) {//I would like to export this.name everytime this function is calles
        this.name = btn.name;
        console.log("name of div:" + btn.name);
    }
}

我什至不知道是否可以尝试使用@input 和@output 的标准方法。这是 angular 2.4.1 谢谢:)

Answer 1

如果您的指令是组件的子指令，您可以将 EventEmitter 与 @Output

一起使用

import {Component, HostListener, Directive, Output, EventEmitter} from '@angular/core';
@Directive({
    selector: 'input',
})
export class ListeningToHostComponent {
    name = '';
    @output() notify: EventEmitter<string> = new EventEmitter<string>();

    @HostListener('click', ['$event.target'])
    onClick(btn) {//I would like to export this.name everytime this function is calles
        this.name = btn.name;
        console.log("name of div:" + btn.name);
        this.notify.emit('Click from directive');
    }
}

组件

@Component({
  selector: 'parent-selector',
  template: `<div>  
  <h1>I'm a container component</h1>
  <directive-selector (notify)='onNotify($event)></directive-selector>
</div>  `,
})
export class ParentComponent {  
  onNotify(message:string):void {
    alert(message);
  }
}

指令导出数据angular 2

Directive export data angular 2

angular

directive