角度@outputが@outputのイベント・エミッターと親通信に子をやろうとし

Question

の作業が、ここには作業 ではないではないが、子コンポーネント

import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'app-emiter', 
    templateUrl: './emiter.component.html', 
    styleUrls: ['./emiter.component.css'] 
}) 
export class EmiterComponent implements OnInit { 

@Output() emitor: EventEmitter<any> 
    constructor() { this.emitor = new EventEmitter()} 

    touchHere(){this.emitor.emit('Should Work'); 
    console.log('<><><><>',this.emitor) // this comes empty 
    } 

    ngOnInit() { 
    } 

} 

あり、これはHTMLテンプレート

<p> 
<button (click)=" touchHere()" class="btn btn-success btn-block">touch</button> 
</p> 

ですconsole.logはtouch内に何も表示されません これを親コンポーネントの中に入れても何も表示されません 親コンポーネント

親テンプレート@outputで

<app-emitor>(emitor)='touchThis($event)'</app-emiter> 

が 'いわゆる' しなければならない、ない子法：ここ

import { Component , OnInit} from '@angular/core'; 
// service I use for other stuff// 
    import { SenderService } from './sender.service'; 
// I dont know if I have to import this but did it just in case 
    import { EmiterComponent } from './emiter/emiter.component' 

@Component({ 
     selector: 'app-root', 
     templateUrl: './app.component.html', 
     styleUrls: ['./app.component.css'] 
    }) 
    export class AppComponent { 
     title = 'app'; 
     user: any; 
     touchThis(message: string) { 
     console.log('Not working: ${message}'); 
     } 
     constructor(private mySessionService: SenderService) { } 
    } 

とは、HTMLテンプレートに

<div> 
    <app-emiter>(touchHere)='touchThis($event)'</app-emiter> 
</div> 

Answer 1

親コンポーネントテンプレートです。また

、以下を参照してください。https://angular.io/guide/component-interaction#parent-listens-for-child-event

Answer 2

<app-emiter (emitor)="touchThis($event)" ></app-emiter> 

@Output()を使用することにより、あなたはディレクティブに変数の名前をcomponent.Addingエミッタのディレクティブで放出する必要があるとが、放出されたイベントを適用する必要がありますを渡す見積もり内のオーバーオーバー機能。