将一些事件信息从子组件发送到父组件答案

【问题标题】：Sending some event info from a child component to the parent component将一些事件信息从子组件发送到父组件
【发布时间】：2017-01-11 20:42:55
【问题描述】：

我想将一个 int 值从子组件传递给它的父组件。事件本身正确到达，但我在父级的接收方法中添加事件参数确实失败。

更新：编辑代码以缩小，但完整的示例

import 'package:angular2/core.dart';

class MyItem {
  int id = 1;
}



@Component(
    selector: 'my-list',
    directives: const [MyListItem],
    template: '''
<div *ngFor='let myItem of myItems'>
  <my-list-item [myItem]='myItem' (dirtiesParent)='doInit($event)'></my-list-item>
</div>
''')
class MyList {

  @Input()
  List<MyItem> myItems = [ new MyItem() ];

  void doInit() {
    print("got event");
  }

}



@Component(
    selector: 'my-list-item',
    template: '''
<div>id {{myItem.id}}<button (click)='doDelete()'>delete</button></div>
''')
class MyListItem {

  @Input()
  MyItem myItem;
  @Output()
  EventEmitter<int> dirtiesParent = new EventEmitter();

  void doDelete() {
    dirtiesParent.add(myItem.id);
  }

}

【问题讨论】：

您是否试图让 doDeleteEntry 接受条目 ID 作为参数？ (onDelete)="doDeleteEntry($event)" 工作吗？
是的，我想这样做。按照您的描述这样做，即使编译器也会抱怨消息Build error: Transform DirectiveProcessor on dart4|lib/entry/entry_component.dart threw error: Angular 2 could not understand the value in View#template.
你能把entry_component.dart的源代码（dart和html）贴出来吗？
我添加了来源
我不认为该错误与您问题中的代码有关。你在哪里有<material-expansionpanel-set *ngFor="let entry of entries"> <entry-... ？

标签： dart angular-dart

【解决方案1】：

我认为您只是不正确地逃脱了$。试试这个：

class MyItem {
  int id = 1;
}

@Component(
    selector: 'my-list',
    directives: const [MyListItem],
    template: '''
<div *ngFor='let myItem of myItems'>
  <my-list-item [myItem]='myItem' (dirtiesParent)='doInit(\$event)'></my-list-item>
</div>
''')
class MyList {
  @Input()
  List<MyItem> myItems = [new MyItem()];

  void doInit(int id) {
    print("got event for id $id");
  }
}

@Component(
    selector: 'my-list-item',
    template: '''
<div>id {{myItem.id}}<button (click)='doDelete()'>delete</button></div>
''')
class MyListItem {
  @Input()
  MyItem myItem;
  @Output()
  EventEmitter<int> dirtiesParent = new EventEmitter();

  void doDelete() {
    dirtiesParent.add(myItem.id);
  }
}

这对我有用（它打印“得到 id 1 的事件”）。请注意，我还将预期的参数添加到doInit()。

【讨论】：

我很惊讶你的编辑没有对未转义的$ 尖叫。如果我可能会问：您使用什么编辑器，您是否安装了 Dart 插件？
我正在使用安装了 Dart 插件的 IntelliJ。 IDE 没有提示我缺少 escacpe 字符。