Question

我是Angular的新手，尝试在子组件和父组件之间传递数据。

在child component.ts

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

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

child component.html

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

在父组件中。

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;
  }
}

在父component.html

中

<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>

在Console中没有显示任何错误，当我点击子菜单中的按钮信息时不显示。我不知道如何正确使用debuger，也许有人告诉我为什么财产不是流动？

Answer 1

您应该将（doubleClick）输出发射器添加到子组件

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

@Output和自定义事件不起作用

1 个答案: