Événement déclencheur angulaire 2

Question

J'essaie de déclencher un événement click sur un autre élément mais cela ne fonctionne pas.

Mon Composant:

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> 
` 
}) 

Lorsque je clique sur le bouton que je dois déclencher (animation) événement.

Ma classe:

export class GenerateCar { 

@Output() animate = new EventEmitter(); 

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

test() { 
    console.log(111) 
} 

}

Answer 1

Je pense mis en place est pas correct ou quelque chose. Vous devez comprendre le concept EventEmitter de Angular2. Il vous permet de tirer custom event de DOM element et de le propager à son parent.

Je ne comprends pas ce que vous voulez faire avec EventEmitter avec votre exemple. Mais je voudrais vous donner une direction qui pourrait vous aider dans votre exemple.

EventEmitter exemple très simple

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

---

Note: (animate) = "test($event): Il racontera angulaire d'invoquer la méthode test($event) du ParentComponent lors ChildComponent(car) feux animate. Les données que nous avons transmises à la méthode "next()" dans car sont disponibles dans ParentComponent en transmettant $event en tant qu'argument à la méthode test().

Pour plus d'informations, vous pouvez vous référer à this bel article.

J'espère que cela vous aidera à aller plus loin.