2016-02-15 3 views
-1

Я пытаюсь вызвать событие 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) 
} 

}

ответ

3

Я думаю установить не правильно или что-то.

Вам необходимо понять концепцию EventEmitter Angular2. Он позволяет запускать 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) метод в ParentComponent когда ChildComponent(car) пожары animate. Данные, которые мы передали методу «next()» в car, доступны в ParentComponent, передав $event в качестве аргумента для метода test().

Для получения дополнительной информации вы можете обратиться к this хорошей статье.

Надеюсь, это поможет вам продвинуться дальше.

Смежные вопросы