2017-01-11 12 views
0

Я хочу передать значение int из дочернего компонента в его родительский компонент. Само событие приходит правильно, но я не могу добавить параметр Event в метод получения родителя.Отправка информации о событии из дочернего компонента в родительский компонент

UPDATE: отредактированный код съежился, но полный пример


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

} 
+1

Вы пытаетесь получить doDeleteEntry, чтобы принять идентификатор записи в качестве параметра? does '(onDelete) =" doDeleteEntry ($ event) "' работает? –

+0

Да, я хочу сделать именно это. При этом, как вы описали, даже компилятор жалуется на сообщение 'Ошибка сборки: Transform DirectiveProcessor on dart4 | lib/entry/entry_component.dart забросила ошибку: Angular 2 не смог понять значение в шаблоне View #. '

+0

Не могли бы вы разместить источник (dart и html) 'entry_component.dart'? –

ответ

2

Я думаю, вы просто неправильно избежала $. Попробуйте следующее:

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().

+0

Я удивлен, что ваш редактор не кричал о unesca ped '$'. Если я могу спросить: какой редактор вы используете и у вас установлен плагин Dart? – filiph

+0

Я использую IntelliJ с установленным плагин Dart. У меня не было намека на IDE, что отсутствует символ escacpe. –