Слушай, классный вопрос.
Заставил пошерстить документацию и применить дедукцию )))
В итоге вот тебе развернутый ответ.
1.
Urukhayy дал частично правильный ответ. Ну, то есть он корректно заметил, что запись вида
@Output() TestEvent = new EventEmitter();
предпочтительней, чем запись вида
@Output('eventEmitterAlias') blaBlaBla = new EventEmitter();
Ангулярщики сами уже не рекомендуют использовать алиасы, даже tslint в нормальных проектах ругается на это и говорит, что способ когда указывается alias не очень крут, и лучше таким способом не пользоваться. Сложно будет отследить эти методы в коде, и уже точно невозможно будет в студии "провалиться" в код.
Но ты можешь так делать, чисто технически :):)
Да и вообще в Typescript принято писать в camelCase стиле (testEvent). PascalCase это уже больше на C# похоже.
2. По существу.
Из документации по ангуляр (
https://angular.io/guide/bootstrapping#the-bootstr... стало ясно, что те компоненты, которые прописаны в bootstrap создаются при запуске приложения. Каждый с нуля со своей структурой дочерних компонентов.
Что это значит для нас?
Ты создал AppComponent, в котором создался MainComponent со всеми нужными связями (@Output). А дальше система создала отдельно MainComponent и поместила куда следует, оторванного от родителя, сиротинушку такого. Связь потеряна.
В этом и было дело.
А чтобы увидеть это - в MainComponent добавь
constructor() {
console.log('main component create');
}
И проследи, сколько раз компонент создался.
Заключение:
Вопрос огонь! Поработай над стилем. Никто не пишет punkt. Представь, что заказчик иностранец. (menuPoint, link, item, point) - item супер вариант ))). Почитай про style-guide ангуляр. Поможет найти общий язык с другими ангулярщиками :):)