@Outputイベントとカスタムイベントが機能しない

Question

私はAngularで新しく、子コンポーネントと親コンポーネントの間でデータをやり取りしてみます。子供で

は親component.tsで

@Output() doubleClick = new EventEmitter<string>(); 

onDoubleClick(nameAccount: string){ 
    this.doubleClick.emit(nameAccount); 
} 

子component.html

<button class="btn btn-primary" (click)="onCreateAccount(accountName.value, status.value)" (dblclick)="onDoubleClick(accountName.value)"> 

をcomponent.ts親component.htmlで

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    accounts = [ 
    { 
     name: 'Master Account', 
     status: 'active' 
    }, 
    { 
     name: 'Testaccount', 
     status: 'inactive' 
    }, 
    { 
     name: 'Hidden Account', 
     status: 'unknown' 
    } 
    ]; 

    nameAccount = ''; 

    onAccountAdded(newAccount: {name: string, status: string}) { 
    this.accounts.push(newAccount); 
    } 

    onStatusChanged(updateInfo: {id: number, newStatus: string}) { 
    this.accounts[updateInfo.id].status = updateInfo.newStatus; 
    } 

    afeterDoubleClicked(name: string) { 
    this.nameAccount = name; 
    } 
} 

<div class="container"> 
<div class="row"> 
    <div class="col-xs-12 col-md-8 col-md-offset-2"> 
     <app-new-account (accountAdded)="onAccountAdded($event)"></app-new-account> 
     <hr> 
     <app-account *ngFor="let acc of accounts; let i = index" [account]="acc" [id]="i" (statusChanged)="onStatusChanged($event)"></app-account> 
    </div> 
</div> 
<p (doubleClick)="afeterDoubleClicked($event)">This is paragraph {{nameAccount}}</p> 

コンソールでは、子からのボタン情報をクリックするとエラーが表示されず、段落に表示されません。私はデバッガを正しく使う方法がわからず、誰かがなぜプロパティが使えないのか教えてくれますか？

Answer 1

あなたは合計親コードを投稿することができ、あなたの子コンポーネント

<app-new-account (doubleClick)="afeterDoubleClicked($event)"(accountAdded)="onAccountAdded($event)"></app-new-account>