Родительский компонент:
import { Component, Input, Output } from '@angular/core';
@Component({
selector: 'sluhcrm',
template: `
<h1>{{title}}</h1>
<main-menu (TestEvent)="MenuClick($event)"></main-menu>
`,
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'MyTitle';
MenuClick(name){
alert(1);
console.log(name);
}
}
Дочерний компонент:
import { Component, Input, Output, EventEmitter } from '@angular/core';
const menu = [
{'name':'Главная', 'url':'/', 'active':1},
{'name':'Районы', 'url':'/', 'active':0},
{'name':'Точки', 'url':'/', 'active':0},
{'name':'Посещения', 'url':'/', 'active':0},
{'name':'Пользователи', 'url':'/', 'active':0}
]
@Component({
selector: 'main-menu',
template: `
<div class="menu">
<div class="punkt" *ngFor="let punkt of menu" [class.active]="punkt.active">
<a (click)="selectMenu(punkt)">
{{punkt.name}} {{punkt.active ? '<': ''}}
</a>
</div>
</div>
`,
styleUrls: ['menu.component.css']
})
export class MenuComponent {
@Output('TestEvent') asd = new EventEmitter();
menu = menu;
selectMenu(punkt){
menu.forEach(element => {
element.active = 0;
});
punkt.active = 1;
this.asd.emit(punkt.name);
}
}
Перепробовал уже все что смог найти, по непонятным мне причинам, родительский компонент отказывается отлавливать событие TestEvent, нет ошибок, логи пустые, он тупо его игнорирует. selectMenu отрабатывает себя нормально.