Задать вопрос
@tonx92

Angular 2+ Почему родительский компонент не видит EventEmitter .emit()?

Родительский компонент:
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 отрабатывает себя нормально.
  • Вопрос задан
  • 628 просмотров
Подписаться 1 Простой Комментировать
Ответ пользователя Urukhayy К ответам на вопрос (3)
@Urukhayy
В дочернем компоненте замените на это:
@Output() TestEvent = new EventEmitter();

И в функции selectMenu вызывайте:
this.TestEvent.emit(punkt.name)
Ответ написан