我正在使用 @Input
将“值”和“类型”从父组件发送到子组件(这工作正常)。现在,我正在尝试使用 @Output
在单击按钮时从子组件中调用父组件的“删除”方法。
我在子和父组件函数中放置了警报函数。当我单击按钮而不是父母时,我只会看到来自孩子的警报消息。我不知道我缺少什么让孩子向父母发送事件。
子组件:
<div class="btn" (click) = "test()" >
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-filter-tag',
templateUrl: './filter-tag.component.html',
styleUrls: ['./filter-tag.component.less'],
})
export class FilterTagComponent implements OnInit {
@Output() removeItemEvent = new EventEmitter();
constructor() { }
value_: string = '';
type_: string = ''
@Input()
set value(value: string) {
this.value_ = value;
}
@Input()
set type(value: string) {
this.type_ = value;
}
test() {
this.removeItemEvent.emit();
alert('Victor');
}
}
父组件:
<app-filter-tag
[value]="item.name"
[type]="item.tagType"
(removeItemEvent)="remove()"
></app-filter-tag>
ngOnInit() {}
remove() {
alert('Hugo');
}