2016-12-13 2 views
2

Я намерен сделать это, чтобы создать настраиваемое событие, в которое я буду слушать внутри того же созданного компонента;Угловой 2 прослушивание пользовательского события внутри компонента

events.component.ts

@Component({ 
    moduleId: module.id.replace("/dist/", "/"), 
    selector: 'event-bind-c', 
    template:` 
      <button (click)="onClicked()">Component click</button> 
      <input (clicked)="showIt($event)" [placeholder]="emitted_val"> 
      ` 
}) 
export class EventBindingComponent implements OnInit { 
    toggled_value:boolean = false; 
    emitted_val:string; 

    constructor() { } 

    ngOnInit() { } 

    @Output() clicked = new EventEmitter<string>(); 
    onClicked =() => { 
     //alert("Inside of component"); 
     this.clicked.emit("It works!"); 
    } 

    showIt = (event_val:string) => { 
     alert("event_val:" + event_val); 
     this.emitted_val = event_val; 
    } 
} 

Если я использую его вне компонента (в родителю) он работает

app.component.ts

@Component({ 
    selector: 'my-app', 
    template: '<event-bind-c (clicked) = "onParentClicked($event)"></event-bind-c>', 
}) 
export class AppComponent { 
onParentClicked= (value:string) => { 
    alert("Outside of component "+value); 
} 
} 

ответ

0

Это не поддерживается.

Только родительский компонент может связать с событием, испускаемых @Output()

Почему вы не просто называть this.showIt() вместо испускать событие?

+0

Я проходил учебное пособие и просто задавался вопросом, нужно ли мне прослушивать настраиваемое событие внутри одного и того же компонента, как бы я это сделал. Я не мог найти в Интернете. – sTx

+0

Как я уже сказал, он не поддерживается. Если вы имеете в виду события DOM, то вы привязываетесь так же, как к событиям от выходов. –