Question

我试图在另一个元素上触发click事件，但它不起作用。

我的组件：

import {Component, Output, EventEmitter} from 'angular2/core';

@Component({
  selector: 'generate-car',
  template: `
    <button [disabled]="!pressed" (click)="parkingCar()"  type="button"  class="parking">Parking Car</button>
    <car *ngFor="#car of cars" [class]="car.type" (animate)="test()">
        <span class="car-number">{{car.id}}</span>
    </car>
`
})

当我点击按钮时，我需要触发（动画）事件。

我的课程：

export class GenerateCar {

@Output() animate = new EventEmitter();

parkingCar() {
    this.animate.emit(null)
}

test() {
    console.log( 111 )
}

}

Answer 1

我认为设置不正确或其他。

您需要了解Angular2的EventEmitter概念。它允许您触发custom event DOM element并将其传播到其父级。

我不明白你想用EventEmitter做什么来做你的例子。但我想在你的例子中给你一个可能对你有帮助的方向。

EventEmitter非常简单的例子

<强> boot.ts

@Component({
selector: 'my-app',
directives:[Car], 
template: `
    <div>{{name}} from parent</div><br>
    <car (animate)="test($event)"></car><bR>
        `
, 
})

export class BodyContent {  //ParentComponent

    name:string='Angular1';

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

<强> car.ts

export class Car {
      @Output() animate: EventEmitter = new EventEmitter();

      setValue()
      {
        console.log('setValue strat');
        this.animate.next('angular2');

        // You can also write below line in place of above line
        //this.animate.emit('Angular2');
      }
}

Working Plunker

<强> 注意：的 (animate) = "test($event) ：当test($event)触发ChildComponent(car)时，它会告诉Angular调用ParentComponent的animate方法。我们通过将car作为参数传递给ParentComponent方法，在$event中提供了传递给test()中“next（）”方法的数据。

有关详细信息，请参阅this好文章。

希望这会帮助你走得更远。

角度2触发事件

1 个答案: