如何从指令向父元素发出输入名称属性值

时间:2018-07-05 00:38:02

标签: angular5 angular-directive

在点击directive时,我需要将attribute名称vale发送给父元素。如何做到这一点?

对我来说,我想清除onclick个新元素的rendred中的输入值。没有输入,因此尝试按指令执行。

请在任何错误之处纠正我!! 如果有正确的方法,请告诉我。

这是指令:

import { Directive, ElementRef, Renderer2, EventEmitter,Output } from '@angular/core';

@Directive({
  selector:'[textCleaner]'
})

export class InputCleaner {

  warpper:Element;
  link:any;
  @Output() notifyParent: EventEmitter<any> = new EventEmitter();
  constructor(private el: ElementRef, private renderer: Renderer2 ) {

    this.warpper = document.createElement('span');
    this.link = document.createElement('a');
    this.link.setAttribute('href', '#');
    this.warpper.className = "cleanerWrapper";
    this.renderer.insertBefore(el.nativeElement.parentNode, this.warpper, el.nativeElement );
    this.renderer.appendChild( this.warpper, el.nativeElement );
    this.renderer.appendChild( this.warpper, this.link );
    var that = this;
    this.link.onclick = function(){
      let name = that.el.nativeElement.attributes.name.value;
      that.notifyParent.emit('name');
    }

  }

}

父母:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';

  getNotification(evt) {
        // Do something with the notification (evt) sent by the child!
  }
}

Live Demo

0 个答案:

没有答案