Question

下面是父组件中代码的一部分，我已经在其子组件中获取了eventEmitter的启用值，即enable = true。

<img src="{{currentImg}}" alt="Play Image not found" (click)="onMouseClick()">
<pause-button (isPauseBtnClicked)="enable = $event"></pause-button>
status is: {{enable}}

那么在听到eventEmitter（enable = true）后如何为currentImg =“someImg.png”赋值？我应该写一个函数吗？如果是这样，如何在没有任何鼠标事件的情况下在img标签中调用该函数？

我知道用鼠标点击事件，事情就变得容易了，currentImg可以在函数内部赋值。

onMouseClick() {
        this.currentImg = this.clickedImg;
    }

Answer 1

看，我不知道你想要达到什么目的。但是写下这个答案是因为您想要EventEmitter方式而不需要调用任何mouseevent。

注意：您的期望可能会有所不同。但它可能会帮助你。如果没有，请将其作为参考。我可能已经理解了完全不同的东西，但目的不是以错误的方式引导你

<img src="{{currentImg}}" alt="Play Image not found" (click)="onMouseClick()">
<pause-button (isPauseBtnClicked)="fire($event)"></pause-button><br>
status is: {{enable}}<br>   // haven't played with status
{{currentImg}}

<强> boot.ts

fire(arg) {
          console.log('test start');
          //this.animate.subscribe((value) => { this.name = value; });
          this.currentImg=arg;
          console.log(arg);
      }

<强> Working Plunker

<强> PasueButton.ts

@Component({
selector: 'pause-button ',  
template: `
________________________________________________________
      <br>
      I'm child 
      <br>
      <img src="img path" (click)="clickMe()"/>
      <= click the img
      <br>
_____________________________________________________
   `
, 
})

export class PasueButton implements OnInit {
      @Output() isPauseBtnClicked: EventEmitter = new EventEmitter();

       constructor() {
          console.log('Constructor called');
       }

        ngOnInit() {
           console.log('onit strat');
        }

       clickMe()
       {
            this.isPauseBtnClicked.next('child Img path is copied');
       }
}

在angular2中，如何在没有鼠标事件的情况下调用元素内的函数？

1 个答案: