NB. Вопрос не в том, чтобы как заставить его работать (так как могу, как объяснил внизу). Это скорее про Зачем Я могу заставить его работать так и никак иначе.
Я разработал такой компонент. Это строка данных, которая может содержать несколько строк данных. Следовательно, в каждом таком случае у нас есть как onRemoval (вызывается, когда пользователь щелкает значок удаления), так и onRemove (вызывается, когда слышен эвент).
@Output() remove: EventEmitter<number> = new EventEmitter<number>();
...
onRemoval() {
console.info("being removed: " + this.id);
this.remove.emit(this.id);
}
onRemove(id: number) {
console.info("removing: " + id);
if (!id)
return;
this.subRows.splice(id, 1);
}
Я уверен, что упустил что-то глупое, но что меня озадачивает, когда я пытаюсь его отладить, так это то, что испускаемое значение является правильным индексом, а полученное значение - нет. Это неопределенный.
Соответствующая часть разметки, которую я пробовал, выглядит так. Я также пробовал с пустыми скобками, а также без скобок.
<div *ngIf = "unfolded">
<app-data-row *ngFor = "let subRow of subRows"
(remove) = "onRemove(id)"
[config] = "subRow"></app-data-row>
</div>
Я гуглил это, но, насколько я мог судить, я следовал правильному подходу, используя эмиттер событий. Кроме того, кажется, что настройка работает, поскольку событие отправляется и принимается. Просто значение я бы, похоже, установлено неправильно.
Единственный способ заставить это работать — вызвать переменную точно$событие и никак иначе. Это я делаю что-то глупое или это требуемый синтаксис?! Я имею в виду, что даже *$id$ не помог...
В шаблоне при подключении вывода дочернего элемента к обратному вызову компонента: $event
- это имя выдаваемого значения, и нет никакого способа обойти это. В конце концов: вызов обработчика не нужно, чтобы иметь вывод в качестве единственного аргумента. Вы могли бы сделать, не знаю,
<app-data-row *ngFor = "let subRow of subRows" (remove) = "onRemove(subRow.id)">
или
<app-data-row *ngFor = "let subRow of subRows" (remove) = "onRemove(subRow.id, $event)">
или
<app-data-row *ngFor = "let subRow of subRows" (remove) = "onRemove($event, subRow.id)">
и так далее и тому подобное. Итак, здесь, в шаблоне, $event
необходим как идентификатор фактического выходного значения.
Теперь, когда вы так говорите, это имеет смысл. Думаю, это был тот день, когда человеку не везет, когда он пытается думать, хе-хе.
$event
— это само событие при использовании @Output
генератора событий компонента/директивы, который выдает значение, и оно захватывается функцией обратного вызова с переменной $event
.
Когда вы определяете прослушиватель событий с помощью круглых скобок, таких как
(remove) = "onRemove($event)"
вы фактически передаете ссылку на метод. Вам не нужна локальная переменная, определенная ранее. А сам Angular заменяет значение $event
на сгенерированное. Но если вы сделаете это как
(remove) = "onRemove(id)"
он считает id
локальной переменной, такой как вы определяете в *ngFor = "let id of idList"
Короче говоря, это единственный способ зафиксировать испускаемое значение при использовании эмиттера выходных событий компонента/директивы.
Вы можете ознакомиться с этой официальной документацией: https://angular.io/guide/user-input
А также этот SO поток: Что именно делает объект $event в Angular 2?
Вы можете прочитать это здесь в документации